ListGroup
React List Groups allows displaying are a series of content.
Usage
Example
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 | Required | 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 |
