350 lines
14 KiB
JavaScript
350 lines
14 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
CBadge,
|
|
CCard,
|
|
CCardBody,
|
|
CCardHeader,
|
|
CCol,
|
|
CFormCheck,
|
|
CListGroup,
|
|
CListGroupItem,
|
|
CRow,
|
|
} from '@coreui/react'
|
|
import { DocsCallout, DocsExample } from 'src/components'
|
|
|
|
const ListGroups = () => {
|
|
return (
|
|
<CRow>
|
|
<CCol xs={12}>
|
|
<DocsCallout name="List Group" href="components/list-group" />
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Basic example</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
The default list group is an unordered list with items and the proper CSS classes.
|
|
Build upon it with the options that follow, or with your CSS as required.
|
|
</p>
|
|
<DocsExample href="components/list-group">
|
|
<CListGroup>
|
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Active items</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Add <code>active</code> boolean property to a <code><CListGroupItem></code> to
|
|
show the current active selection.
|
|
</p>
|
|
<DocsExample href="components/list-group/#active-items">
|
|
<CListGroup>
|
|
<CListGroupItem active>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Disabled items</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Add <code>disabled</code> boolean property to a <code><CListGroupItem></code> to
|
|
make it appear disabled.
|
|
</p>
|
|
<DocsExample href="components/list-group/#disabled-items">
|
|
<CListGroup>
|
|
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Links and buttons</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Use <code><a></code>s or <code><button></code>s to create{' '}
|
|
<em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
|
|
<code>component="a|button"</code>. We separate these pseudo-classes to ensure
|
|
list groups made of non-interactive elements (like <code><li></code>s or{' '}
|
|
<code><div></code>
|
|
s) don'tprovide a click or tap affordance.
|
|
</p>
|
|
<DocsExample href="components/list-group/#links-and-buttons">
|
|
<CListGroup>
|
|
<CListGroupItem component="a" href="#" active>
|
|
Cras justo odio
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a" href="#">
|
|
Dapibus ac facilisis in
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a" href="#">
|
|
Morbi leo risus
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a" href="#">
|
|
Porta ac consectetur ac
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a" href="#" disabled>
|
|
Vestibulum at eros
|
|
</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Flush</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Add <code>flush</code> boolean property to remove some borders and rounded corners to
|
|
render list group items edge-to-edge in a parent container (e.g., cards).
|
|
</p>
|
|
<DocsExample href="components/list-group/#flush">
|
|
<CListGroup flush>
|
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
|
|
<CListGroupItem>Vestibulum at eros</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Horizontal</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Add <code>layout="horizontal"</code> to change the layout of list group items
|
|
from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
|
|
variant <code>.layout="horizontal-{sm | md | lg | xl | xxl}"</code>{' '}
|
|
to make a list group horizontal starting at that breakpoint's{' '}
|
|
<code>min-width</code>. Currently{' '}
|
|
<strong>horizontal list groups cannot be combined with flush list groups.</strong>
|
|
</p>
|
|
<DocsExample href="components/list-group/#flush">
|
|
{['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
|
|
<CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
|
|
<CListGroupItem>Cras justo odio</CListGroupItem>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
<CListGroupItem>Morbi leo risus</CListGroupItem>
|
|
</CListGroup>
|
|
))}
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Contextual classes</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Use contextual classes to style list items with a stateful background and color.
|
|
</p>
|
|
<DocsExample href="components/list-group/#contextual-classes">
|
|
<CListGroup>
|
|
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
|
|
{[
|
|
'primary',
|
|
'secondary',
|
|
'success',
|
|
'danger',
|
|
'warning',
|
|
'info',
|
|
'light',
|
|
'dark',
|
|
].map((color, index) => (
|
|
<CListGroupItem color={color} key={index}>
|
|
A simple {color} list group item
|
|
</CListGroupItem>
|
|
))}
|
|
</CListGroup>
|
|
</DocsExample>
|
|
<p className="text-medium-emphasis small">
|
|
Contextual classes also work with <code><a></code>s or{' '}
|
|
<code><button></code>s. Note the addition of the hover styles here not present
|
|
in the previous example. Also supported is the <code>active</code> state; apply it to
|
|
indicate an active selection on a contextual list group item.
|
|
</p>
|
|
<DocsExample href="components/list-group/#contextual-classes">
|
|
<CListGroup>
|
|
<CListGroupItem component="a" href="#">
|
|
Dapibus ac facilisis in
|
|
</CListGroupItem>
|
|
{[
|
|
'primary',
|
|
'secondary',
|
|
'success',
|
|
'danger',
|
|
'warning',
|
|
'info',
|
|
'light',
|
|
'dark',
|
|
].map((color, index) => (
|
|
<CListGroupItem component="a" href="#" color={color} key={index}>
|
|
A simple {color} list group item
|
|
</CListGroupItem>
|
|
))}
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>With badges</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Add badges to any list group item to show unread counts, activity, and more.
|
|
</p>
|
|
<DocsExample href="components/list-group/#with-badges">
|
|
<CListGroup>
|
|
<CListGroupItem className="d-flex justify-content-between align-items-center">
|
|
Cras justo odio
|
|
<CBadge color="primary" shape="rounded-pill">
|
|
14
|
|
</CBadge>
|
|
</CListGroupItem>
|
|
<CListGroupItem className="d-flex justify-content-between align-items-center">
|
|
Dapibus ac facilisis in
|
|
<CBadge color="primary" shape="rounded-pill">
|
|
2
|
|
</CBadge>
|
|
</CListGroupItem>
|
|
<CListGroupItem className="d-flex justify-content-between align-items-center">
|
|
Morbi leo risus
|
|
<CBadge color="primary" shape="rounded-pill">
|
|
1
|
|
</CBadge>
|
|
</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Custom content</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Add nearly any HTML within, even for linked list groups like the one below, with the
|
|
help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
|
|
</p>
|
|
<DocsExample href="components/list-group/#custom-content">
|
|
<CListGroup>
|
|
<CListGroupItem component="a" href="#" active>
|
|
<div className="d-flex w-100 justify-content-between">
|
|
<h5 className="mb-1">List group item heading</h5>
|
|
<small>3 days ago</small>
|
|
</div>
|
|
<p className="mb-1">
|
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.
|
|
</p>
|
|
<small>Donec id elit non mi porta.</small>
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a" href="#">
|
|
<div className="d-flex w-100 justify-content-between">
|
|
<h5 className="mb-1">List group item heading</h5>
|
|
<small className="text-medium-emphasis">3 days ago</small>
|
|
</div>
|
|
<p className="mb-1">
|
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.
|
|
</p>
|
|
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
|
|
</CListGroupItem>
|
|
<CListGroupItem component="a" href="#">
|
|
<div className="d-flex w-100 justify-content-between">
|
|
<h5 className="mb-1">List group item heading</h5>
|
|
<small className="text-medium-emphasis">3 days ago</small>
|
|
</div>
|
|
<p className="mb-1">
|
|
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
|
|
varius blandit.
|
|
</p>
|
|
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
|
|
</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={12}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
<strong>React List Group</strong> <small>Checkboxes and radios</small>
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<p className="text-medium-emphasis small">
|
|
Place CoreUI's checkboxes and radios within list group items and customize as
|
|
needed.
|
|
</p>
|
|
<DocsExample href="components/list-group/#checkboxes-and-radios">
|
|
<CListGroup>
|
|
<CListGroupItem>
|
|
<CFormCheck label="Cras justo odio" />
|
|
</CListGroupItem>
|
|
<CListGroupItem>
|
|
<CFormCheck label="Dapibus ac facilisis in" defaultChecked />
|
|
</CListGroupItem>
|
|
<CListGroupItem>
|
|
<CFormCheck label="Morbi leo risus" defaultChecked />
|
|
</CListGroupItem>
|
|
<CListGroupItem>
|
|
<CFormCheck label="orta ac consectetur ac" />
|
|
</CListGroupItem>
|
|
<CListGroupItem>
|
|
<CFormCheck label="Vestibulum at eros" />
|
|
</CListGroupItem>
|
|
</CListGroup>
|
|
</DocsExample>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
)
|
|
}
|
|
|
|
export default ListGroups
|