1658 lines
90 KiB
JavaScript
Executable File
1658 lines
90 KiB
JavaScript
Executable File
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 }) => (
|
|
<CardText>
|
|
<span className="mr-2 text-muted">
|
|
#{ cardNo }
|
|
</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisl elit, porta a sapien eget, fringilla sagittis ex.
|
|
</CardText>
|
|
);
|
|
|
|
const cardContent = (title = 'Some Card Title') => (
|
|
<CardBody>
|
|
<CardTitle>
|
|
{ title }
|
|
</CardTitle>
|
|
{ cardText }
|
|
</CardBody>
|
|
);
|
|
|
|
const ListGroups = () => (
|
|
<React.Fragment>
|
|
<Container>
|
|
<HeaderMain
|
|
title="List Groups"
|
|
className="mb-5 mt-4"
|
|
/>
|
|
{ /* START Header 1 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={1}
|
|
title="Basic Examples"
|
|
subTitle="List groups are a flexible and powerful component for displaying a series of content."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 1 */}
|
|
{ /* START Section 1 */}
|
|
<Row>
|
|
{ /* START Col6 1 */}
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Basic Example
|
|
<span className="small ml-1 text-muted">
|
|
#1.01
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
The most basic list group is an unordered list with
|
|
list items and the proper classes. Example: <code>
|
|
<ListGroupItem> ... </ListGroupItem>
|
|
</code>.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem>Cras justo odio</ListGroupItem>
|
|
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem>Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem>Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Disabled Items
|
|
<span className="small ml-1 text-muted">
|
|
#1.03
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Add <code>disabled</code> to a <code>ListGroupItem</code> to
|
|
make it appear disabled.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem disabled>Cras justo odio</ListGroupItem>
|
|
<ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem>Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem>Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem>Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Links and Buttons (Disabled)
|
|
<span className="small ml-1 text-muted">
|
|
#1.05
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Add <code>active</code> to a <code>ListGroupItem</code> to
|
|
make it appear active.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
|
|
<ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Contextual Classes
|
|
<span className="small ml-1 text-muted">
|
|
#1.07
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
From the color palette, add to <code><ListGroupItem></code> for example: <code>success</code>, <code>primary</code> etc.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem color="white">Cras justo odio</ListGroupItem>
|
|
<ListGroupItem color="primary">Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem color="secondary">Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem color="success">Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem color="danger">Vestibulum at eros</ListGroupItem>
|
|
<ListGroupItem color="warning">Cras justo odio</ListGroupItem>
|
|
<ListGroupItem color="info">Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem color="light">Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem color="dark">Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: With Badges
|
|
<span className="small ml-1 text-muted">
|
|
#1.09
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Add Badge, for example:
|
|
<code><Badge pill className="ml-auto align-self-center">14</Badge></code>.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem className="justify-content-between d-flex">
|
|
Cras justo odio
|
|
<Badge pill className="ml-auto align-self-center">14</Badge>
|
|
</ListGroupItem>
|
|
<ListGroupItem className="justify-content-between d-flex">
|
|
Dapibus ac facilisis in
|
|
<Badge pill className="ml-auto align-self-center">2</Badge>
|
|
</ListGroupItem>
|
|
<ListGroupItem className="justify-content-between d-flex">
|
|
Morbi leo risus
|
|
<Badge pill className="ml-auto align-self-center">1</Badge>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
{ /* END Col6 1 */}
|
|
{ /* START Col6 2 */}
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Active Items (Anchors)
|
|
<span className="small ml-1 text-muted">
|
|
#1.02
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
The most basic list group is an unordered list with
|
|
list items and the proper classes. Example: <code>
|
|
<ListGroupItem active tag="a" href="#" action> ... </ListGroupItem>
|
|
</code>.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
|
|
<ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Active Items (Buttons)
|
|
<span className="small ml-1 text-muted">
|
|
#1.04
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
The most basic list group is an unordered list with
|
|
list items and the proper classes. Example: <code>
|
|
<ListGroupItem active tag="a" href="#" action> ... </ListGroupItem>
|
|
</code>.
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem active tag="button" href="#" action>Cras justo odio</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem disabled tag="button" href="#" action>Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Flush
|
|
<span className="small ml-1 text-muted">
|
|
#1.06
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Often used in combination with Cards. Just add to <code><ListGroup flush></code>.
|
|
</p>
|
|
<ListGroup flush>
|
|
<ListGroupItem tag="button" href="#" action>Cras justo odio</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Dapibus ac facilisis in</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Morbi leo risus</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Porta ac consectetur ac</ListGroupItem>
|
|
<ListGroupItem tag="button" href="#" action>Vestibulum at eros</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Custom Content
|
|
<span className="small ml-1 text-muted">
|
|
#1.09
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Here is an example of combination
|
|
<code><ListGroupItemHeading className="h6"></code>
|
|
and <code><ListGroupItemText></code>
|
|
</p>
|
|
<ListGroup>
|
|
<ListGroupItem active>
|
|
<ListGroupItemHeading className="h6">
|
|
List group item heading
|
|
</ListGroupItemHeading>
|
|
<ListGroupItemText className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</ListGroupItemText>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<ListGroupItemHeading className="h6">
|
|
List group item heading
|
|
</ListGroupItemHeading>
|
|
<ListGroupItemText className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</ListGroupItemText>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<ListGroupItemHeading className="h6">
|
|
List group item heading
|
|
</ListGroupItemHeading>
|
|
<ListGroupItemText className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</ListGroupItemText>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
{ /* END Col6 2 */}
|
|
</Row>
|
|
{ /* END Section 1 */}
|
|
|
|
{ /* START Header 2 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={2}
|
|
title="UI Examples"
|
|
className="mt-5"
|
|
subTitle="The most commonly used UI/UX elements in applications."
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 2 */}
|
|
{ /* START Section 2 */}
|
|
<Row>
|
|
{ /* START Col6 1 */}
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Default
|
|
<span className="small ml-1 text-muted">
|
|
#2.01
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="warning"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Color Header
|
|
<span className="small ml-1 text-muted">
|
|
#2.02
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1 text-success">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1 text-danger">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1 text-warning">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="warning"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Color Text
|
|
<span className="small ml-1 text-muted">
|
|
#2.04
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="text-muted mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="text-danger mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="text-success mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Status Icon
|
|
<span className="small ml-1 text-muted">
|
|
#2.06
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top>
|
|
<i className="fa fa-circle text-danger"></i>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="warning"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top>
|
|
<i className="fa fa-circle text-warning"></i>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top>
|
|
<i className="fa fa-circle text-success"></i>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Right Button
|
|
<span className="small ml-1 text-muted">
|
|
#2.08
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top className="ml-2">
|
|
<Button outline color="secondary" size="sm">
|
|
<i className="fa fa-user fa-fw"></i>
|
|
</Button>{' '}
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top className="ml-2">
|
|
<Button outline color="secondary" size="sm">
|
|
<i className="fa fa-gear fa-fw"></i>
|
|
</Button>{' '}
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top className="ml-2">
|
|
<Button outline color="secondary" size="sm">
|
|
<i className="fa fa-exclamation-circle fa-fw"></i>
|
|
</Button>{' '}
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Left Icons Single
|
|
<span className="small ml-1 text-muted">
|
|
#2.10
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<i className="fa fa-file-pdf-o fa-fw fa-lg text-danger"></i>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
Document PDF
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<i className="fa fa-file-word-o fa-fw fa-lg text-primary"></i>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
Document Word
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<i className="fa fa-file-excel-o fa-fw fa-lg text-success"></i>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
Document Excell
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Right Radio
|
|
<span className="small ml-1 text-muted">
|
|
#2.12
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<div>
|
|
<CustomInput type="radio" id="rightRadio1" name="customRadio" label="" defaultChecked />
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<div>
|
|
<CustomInput type="radio" id="rightRadio2" name="customRadio" label="" />
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top>
|
|
<div>
|
|
<CustomInput type="radio" id="rightRadio3" name="customRadio" label="" />
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Left Radio
|
|
<span className="small ml-1 text-muted">
|
|
#2.14
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left className="mr-3">
|
|
<CustomInput type="radio" id="leftRadio1" name="leftRadio" label="" defaultChecked />
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<CustomInput type="radio" id="leftRadio2" name="leftRadio" label="" />
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<CustomInput type="radio" id="leftRadio3" name="leftRadio" label="" />
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
{ /* END Col6 1 */}
|
|
{ /* START Col6 2 */}
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Left Default
|
|
<span className="small ml-1 text-muted">
|
|
#2.02
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top className="ml-2">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top className="ml-2">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="warning"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top className="ml-2">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Right Badge
|
|
<span className="small ml-1 text-muted">
|
|
#2.03
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right middle>
|
|
<Badge color="secondary">Offline</Badge>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="danger"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right middle>
|
|
<Badge color="danger">Busy</Badge>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="success"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right middle>
|
|
<Badge color="success">Online</Badge>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Right Icon
|
|
<span className="small ml-1 text-muted">
|
|
#2.07
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top className="ml-2">
|
|
<i className="fa fa-user"></i>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top className="ml-2">
|
|
<i className="fa fa-gear"></i>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media left top className="ml-2">
|
|
<i className="fa fa-exclamation-circle"></i>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Left Icon
|
|
<span className="small ml-1 text-muted">
|
|
#2.09
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<span className="fa-stack fa-lg">
|
|
<i className="fa fa-circle fa-stack-2x text-success"></i>
|
|
<i className="fa fa-check fa-stack-1x text-white"></i>
|
|
</span>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
Success
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<span className="fa-stack fa-lg">
|
|
<i className="fa fa-circle fa-stack-2x text-danger"></i>
|
|
<i className="fa fa-close fa-stack-1x text-white"></i>
|
|
</span>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
Danger
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<span className="fa-stack fa-lg">
|
|
<i className="fa fa-circle fa-stack-2x text-warning"></i>
|
|
<i className="fa fa-exclamation fa-stack-1x text-white"></i>
|
|
</span>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
Warning
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Right Button
|
|
<span className="small ml-1 text-muted">
|
|
#2.08
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top className="ml-2">
|
|
<div>
|
|
<CustomInput type="checkbox" id="rightCheckbox1" label="" defaultChecked />
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top className="ml-2">
|
|
<div>
|
|
<CustomInput type="checkbox" id="rightCheckbox2" label="" />
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem tag="button" action href="#">
|
|
<Media>
|
|
<Media left top className="mr-4">
|
|
<Avatar.Image
|
|
size="md"
|
|
src={ randomAvatar() }
|
|
addOns={[
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="white"
|
|
key="avatar-icon-bg"
|
|
/>,
|
|
<AvatarAddOn.Icon
|
|
className="fa fa-circle"
|
|
color="secondary"
|
|
key="avatar-icon-fg"
|
|
/>
|
|
]}
|
|
/>
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
<Media right top className="ml-2">
|
|
<div>
|
|
<CustomInput type="checkbox" id="rightCheckbox3" label="" />
|
|
</div>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
List Groups: Media: Left Checkbox
|
|
<span className="small ml-1 text-muted">
|
|
#2.13
|
|
</span>
|
|
</h6>
|
|
<ListGroup>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left className="mr-3">
|
|
<CustomInput className="pt-0 mt-0" type="checkbox" id="leftCheckbox1" label="" defaultChecked />
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<CustomInput className="pt-0 mt-0" type="checkbox" id="leftCheckbox2" name="leftRadio" label="" />
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
<ListGroupItem>
|
|
<Media>
|
|
<Media left top className="mr-3">
|
|
<CustomInput className="pt-0 mt-0" type="checkbox" id="leftCheckbox3" name="leftRadio" label="" />
|
|
</Media>
|
|
<Media body>
|
|
<span className="mt-0 d-flex h6 mb-1">
|
|
{ faker.name.firstName() } { faker.name.lastName() }
|
|
</span>
|
|
<p className="mb-0">
|
|
{ faker.lorem.sentence() }
|
|
</p>
|
|
</Media>
|
|
</Media>
|
|
</ListGroupItem>
|
|
</ListGroup>
|
|
</div>
|
|
{ /* END Example */}
|
|
|
|
</Col>
|
|
{ /* END Col6 2 */}
|
|
</Row>
|
|
{ /* END Section 2 */}
|
|
|
|
|
|
</Container>
|
|
</React.Fragment>
|
|
);
|
|
|
|
export default ListGroups; |