import React from 'react'; import { faker } from '@faker-js/faker/locale/fr'; import { Container, Row, Col, CardBody, CardTitle, Badge, Button, Media, Avatar, AvatarAddOn, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, CustomInput, CardText } from './../../../components'; import { randomAvatar } from './../../../utilities'; import { HeaderMain } from "../../components/HeaderMain"; import { HeaderDemo } from "../../components/HeaderDemo"; const cardText = ({ cardNo }) => ( #{ cardNo } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl elit, porta a sapien eget, fringilla sagittis ex. ); const cardContent = (title = 'Some Card Title') => ( { title } { cardText } ); const ListGroups = () => ( { /* START Header 1 */} { /* END Header 1 */} { /* START Section 1 */} { /* START Col6 1 */} { /* START Example */}
List Groups: Basic Example #1.01

The most basic list group is an unordered list with list items and the proper classes. Example: <ListGroupItem> ... </ListGroupItem> .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: Disabled Items #1.03

Add disabled to a ListGroupItem to make it appear disabled.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: Links and Buttons (Disabled) #1.05

Add active to a ListGroupItem to make it appear active.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: Contextual Classes #1.07

From the color palette, add to <ListGroupItem> for example: success, primary etc.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros Cras justo odio Dapibus ac facilisis in Morbi leo risus Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: With Badges #1.09

Add Badge, for example: <Badge pill className="ml-auto align-self-center">14</Badge>.

Cras justo odio 14 Dapibus ac facilisis in 2 Morbi leo risus 1
{ /* END Example */} { /* END Col6 1 */} { /* START Col6 2 */} { /* START Example */}
List Groups: Active Items (Anchors) #1.02

The most basic list group is an unordered list with list items and the proper classes. Example: <ListGroupItem active tag="a" href="#" action> ... </ListGroupItem> .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: Active Items (Buttons) #1.04

The most basic list group is an unordered list with list items and the proper classes. Example: <ListGroupItem active tag="a" href="#" action> ... </ListGroupItem> .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: Flush #1.06

Often used in combination with Cards. Just add to <ListGroup flush>.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros
{ /* END Example */} { /* START Example */}
List Groups: Custom Content #1.09

Here is an example of combination <ListGroupItemHeading className="h6"> and <ListGroupItemText>

List group item heading { faker.lorem.sentence() } List group item heading { faker.lorem.sentence() } List group item heading { faker.lorem.sentence() }
{ /* END Example */} { /* END Col6 2 */} { /* END Section 1 */} { /* START Header 2 */} { /* END Header 2 */} { /* START Section 2 */} { /* START Col6 1 */} { /* START Example */}
List Groups: Media: Default #2.01
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Color Header #2.02
{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} />
{ /* END Example */} { /* START Example */}
List Groups: Media: Color Text #2.04
{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} />
{ /* END Example */} { /* START Example */}
List Groups: Media: Status Icon #2.06
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Right Button #2.08
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{' '} , ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{' '} , ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{' '}
{ /* END Example */} { /* START Example */}
List Groups: Media: Left Icons Single #2.10
Document PDF

{ faker.lorem.sentence() }

Document Word

{ faker.lorem.sentence() }

Document Excell

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Right Radio #2.12
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Left Radio #2.14
{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* END Col6 1 */} { /* START Col6 2 */} { /* START Example */}
List Groups: Media: Left Default #2.02
{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} />
{ /* END Example */} { /* START Example */}
List Groups: Media: Right Badge #2.03
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

Offline , ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

Busy , ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

Online
{ /* END Example */} { /* START Example */}
List Groups: Media: Right Icon #2.07
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Left Icon #2.09
Success

{ faker.lorem.sentence() }

Danger

{ faker.lorem.sentence() }

Warning

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Right Button #2.08
, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

, ]} /> { faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* START Example */}
List Groups: Media: Left Checkbox #2.13
{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ faker.name.firstName() } { faker.name.lastName() }

{ faker.lorem.sentence() }

{ /* END Example */} { /* END Col6 2 */} { /* END Section 2 */} ); export default ListGroups;