Docs Menu

List Group

List Groups have the following properties which are optional:

Property Required? Type Options Description
border no bool
  • false (default)
  • true
 Does the Input Group have a border
bg no string
  • null (default)
  • transparent
  • warning
  • success
  • info
  • notice
 Background color and UI them for the List Group component.

Basic Examples
Basic List Group example with Nav Links and a border. 

            
 1<x-fcui-list-group :border="true">
 2 
 3    <x-fcui-nav-link href="#"
 4                     classes="text-cyan-300 block hover:text-cyan-200 py-1 px-2">
 5        Link 1</x-fcui-nav-link>
 6 
 7    <x-fcui-nav-link href="#"
 8                     classes="text-cyan-300 block hover:text-cyan-200 py-1 px-2"
 9                     :active="true">
10        Link 2</x-fcui-nav-link>
11 
12    <x-fcui-nav-link href="#"
13                     classes="text-cyan-300 block hover:text-cyan-200 py-1 px-2">
14        Link 3</x-fcui-nav-link>
15 
16</x-fcui-list-group>
Link 1 Link 2 Link 3

Advanced Example
List Group with a border and the 'warning' bg setting. 

            
 1<x-fcui-list-group bg="warning" border="'true'">
 2 
 3    <x-fcui-nav-link href="#" classes="text-red-300 block rounded-full hover:text-red-100 hover:bg-cyan-500 py-1 px-2 bg-cyan-700 mb-2">
 4        Link 1</x-fcui-nav-link>
 5 
 6    <x-fcui-nav-link href="#"
 7                     classes="text-red-300 block rounded-full hover:text-red-100 hover:bg-cyan-500 py-1 px-2 bg-cyan-700 mb-2"
 8                     icon='<i class="fa-solid fa-face-meh"></i>'>
 9        Link 2</x-fcui-nav-link>
10 
11    <x-fcui-nav-link href="#"
12                     classes="text-red-300 block rounded-full hover:text-red-100 hover:bg-cyan-500 py-1 px-2 bg-cyan-700 mb-2">
13        Link 3</x-fcui-nav-link>
14 
15</x-fcui-list-group>
Link 1 Link 2 Link 3