ListGroup

React List Groups allows displaying are a series of content.

Usage

Example

This is a default list group item

This is a primary list group item

This is a secondary list group item

This is a success list group item

This is a danger list group item

This is a warning list group item

This is a info list group item

This is a light list group item

This is a dark list group item

Script


  return (
    <CListGroup>
      <CListGroupItem href="#">
        This is a default list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="primary">
        This is a primary list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="secondary">
        This is a secondary list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="success">
        This is a success list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="danger">
        This is a danger list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="warning">
        This is a warning list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="info">
        This is a info list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="light">
        This is a light list group item
      </CListGroupItem>
      <CListGroupItem href="#" color="dark">
        This is a dark list group item
      </CListGroupItem>
    </CListGroup>
  )

# Features

Automically detect if item is actionable
If 'to' or 'href' prop is passed to CListGroupItem it gains functionality of CLink component - it gains all props and options of CLink component

# ListGroup API

Name	Type	Default Value
tag	any	ul
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
flush	boolean
sets flush mode
horizontal	string
sets horizontal mode, pass breakpoint, if you want list group to be horizontal from specific width
accent	boolean
add color accent

ListGroupItem

# ListGroupItem API

Name	Type	Default Value
tag	any	li
main HTML tag name
className	any
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
active	boolean
active state
disabled	boolean
disbale state
color	string
background color
accent	string
accent type
action	boolean
set action mode (hover effect)