coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CBadge,
4
  CCard,
5
  CCardBody,
6
  CCardHeader,
7
  CCol,
8
  CFormCheck,
9
  CListGroup,
10
  CListGroupItem,
11
  CRow,
12
} from '@coreui/react'
13
import { DocsExample } from 'src/components'
14

15
const ListGroups = () => {
16
  return (
17
    <CRow>
18
      <CCol xs={12}>
19
        <CCard className="mb-4">
20
          <CCardHeader>
21
            <strong>React List Group</strong> <small>Basic example</small>
22
          </CCardHeader>
23
          <CCardBody>
24
            <p className="text-body-secondary small">
25
              The default list group is an unordered list with items and the proper CSS classes.
26
              Build upon it with the options that follow, or with your CSS as required.
27
            </p>
28
            <DocsExample href="components/list-group">
29
              <CListGroup>
30
                <CListGroupItem>Cras justo odio</CListGroupItem>
31
                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
32
                <CListGroupItem>Morbi leo risus</CListGroupItem>
33
                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
34
                <CListGroupItem>Vestibulum at eros</CListGroupItem>
35
              </CListGroup>
36
            </DocsExample>
37
          </CCardBody>
38
        </CCard>
39
      </CCol>
40
      <CCol xs={12}>
41
        <CCard className="mb-4">
42
          <CCardHeader>
43
            <strong>React List Group</strong> <small>Active items</small>
44
          </CCardHeader>
45
          <CCardBody>
46
            <p className="text-body-secondary small">
47
              Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
48
              show the current active selection.
49
            </p>
50
            <DocsExample href="components/list-group/#active-items">
51
              <CListGroup>
52
                <CListGroupItem active>Cras justo odio</CListGroupItem>
53
                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
54
                <CListGroupItem>Morbi leo risus</CListGroupItem>
55
                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
56
                <CListGroupItem>Vestibulum at eros</CListGroupItem>
57
              </CListGroup>
58
            </DocsExample>
59
          </CCardBody>
60
        </CCard>
61
      </CCol>
62
      <CCol xs={12}>
63
        <CCard className="mb-4">
64
          <CCardHeader>
65
            <strong>React List Group</strong> <small>Disabled items</small>
66
          </CCardHeader>
67
          <CCardBody>
68
            <p className="text-body-secondary small">
69
              Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
70
              make it appear disabled.
71
            </p>
72
            <DocsExample href="components/list-group/#disabled-items">
73
              <CListGroup>
74
                <CListGroupItem disabled>Cras justo odio</CListGroupItem>
75
                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
76
                <CListGroupItem>Morbi leo risus</CListGroupItem>
77
                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
78
                <CListGroupItem>Vestibulum at eros</CListGroupItem>
79
              </CListGroup>
80
            </DocsExample>
81
          </CCardBody>
82
        </CCard>
83
      </CCol>
84
      <CCol xs={12}>
85
        <CCard className="mb-4">
86
          <CCardHeader>
87
            <strong>React List Group</strong> <small>Links and buttons</small>
88
          </CCardHeader>
89
          <CCardBody>
90
            <p className="text-body-secondary small">
91
              Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
92
              <em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
93
              <code>component=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure
94
              list groups made of non-interactive elements (like <code>&lt;li&gt;</code>s or{' '}
95
              <code>&lt;div&gt;</code>
96
              s) don&#39;tprovide a click or tap affordance.
97
            </p>
98
            <DocsExample href="components/list-group/#links-and-buttons">
99
              <CListGroup>
100
                <CListGroupItem as="a" href="#" active>
101
                  Cras justo odio
102
                </CListGroupItem>
103
                <CListGroupItem as="a" href="#">
104
                  Dapibus ac facilisis in
105
                </CListGroupItem>
106
                <CListGroupItem as="a" href="#">
107
                  Morbi leo risus
108
                </CListGroupItem>
109
                <CListGroupItem as="a" href="#">
110
                  Porta ac consectetur ac
111
                </CListGroupItem>
112
                <CListGroupItem as="a" href="#" disabled>
113
                  Vestibulum at eros
114
                </CListGroupItem>
115
              </CListGroup>
116
            </DocsExample>
117
          </CCardBody>
118
        </CCard>
119
      </CCol>
120
      <CCol xs={12}>
121
        <CCard className="mb-4">
122
          <CCardHeader>
123
            <strong>React List Group</strong> <small>Flush</small>
124
          </CCardHeader>
125
          <CCardBody>
126
            <p className="text-body-secondary small">
127
              Add <code>flush</code> boolean property to remove some borders and rounded corners to
128
              render list group items edge-to-edge in a parent container (e.g., cards).
129
            </p>
130
            <DocsExample href="components/list-group/#flush">
131
              <CListGroup flush>
132
                <CListGroupItem>Cras justo odio</CListGroupItem>
133
                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
134
                <CListGroupItem>Morbi leo risus</CListGroupItem>
135
                <CListGroupItem>Porta ac consectetur ac</CListGroupItem>
136
                <CListGroupItem>Vestibulum at eros</CListGroupItem>
137
              </CListGroup>
138
            </DocsExample>
139
          </CCardBody>
140
        </CCard>
141
      </CCol>
142
      <CCol xs={12}>
143
        <CCard className="mb-4">
144
          <CCardHeader>
145
            <strong>React List Group</strong> <small>Horizontal</small>
146
          </CCardHeader>
147
          <CCardBody>
148
            <p className="text-body-secondary small">
149
              Add <code>layout=&#34;horizontal&#34;</code> to change the layout of list group items
150
              from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
151
              variant <code>.layout=&#34;horizontal-&#123;sm | md | lg | xl | xxl&#125;&#34;</code>{' '}
152
              to make a list group horizontal starting at that breakpoint&#39;s{' '}
153
              <code>min-width</code>. Currently{' '}
154
              <strong>horizontal list groups cannot be combined with flush list groups.</strong>
155
            </p>
156
            <DocsExample href="components/list-group/#flush">
157
              {['', '-sm', '-md', '-lg', '-xl', '-xxl'].map((breakpoint, index) => (
158
                <CListGroup className="mb-2" layout={`horizontal${breakpoint}`} key={index}>
159
                  <CListGroupItem>Cras justo odio</CListGroupItem>
160
                  <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
161
                  <CListGroupItem>Morbi leo risus</CListGroupItem>
162
                </CListGroup>
163
              ))}
164
            </DocsExample>
165
          </CCardBody>
166
        </CCard>
167
      </CCol>
168
      <CCol xs={12}>
169
        <CCard className="mb-4">
170
          <CCardHeader>
171
            <strong>React List Group</strong> <small>Contextual classes</small>
172
          </CCardHeader>
173
          <CCardBody>
174
            <p className="text-body-secondary small">
175
              Use contextual classes to style list items with a stateful background and color.
176
            </p>
177
            <DocsExample href="components/list-group/#contextual-classes">
178
              <CListGroup>
179
                <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
180
                {[
181
                  'primary',
182
                  'secondary',
183
                  'success',
184
                  'danger',
185
                  'warning',
186
                  'info',
187
                  'light',
188
                  'dark',
189
                ].map((color, index) => (
190
                  <CListGroupItem color={color} key={index}>
191
                    A simple {color} list group item
192
                  </CListGroupItem>
193
                ))}
194
              </CListGroup>
195
            </DocsExample>
196
            <p className="text-body-secondary small">
197
              Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
198
              <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
199
              in the previous example. Also supported is the <code>active</code> state; apply it to
200
              indicate an active selection on a contextual list group item.
201
            </p>
202
            <DocsExample href="components/list-group/#contextual-classes">
203
              <CListGroup>
204
                <CListGroupItem as="a" href="#">
205
                  Dapibus ac facilisis in
206
                </CListGroupItem>
207
                {[
208
                  'primary',
209
                  'secondary',
210
                  'success',
211
                  'danger',
212
                  'warning',
213
                  'info',
214
                  'light',
215
                  'dark',
216
                ].map((color, index) => (
217
                  <CListGroupItem as="a" href="#" color={color} key={index}>
218
                    A simple {color} list group item
219
                  </CListGroupItem>
220
                ))}
221
              </CListGroup>
222
            </DocsExample>
223
          </CCardBody>
224
        </CCard>
225
      </CCol>
226
      <CCol xs={12}>
227
        <CCard className="mb-4">
228
          <CCardHeader>
229
            <strong>React List Group</strong> <small>With badges</small>
230
          </CCardHeader>
231
          <CCardBody>
232
            <p className="text-body-secondary small">
233
              Add badges to any list group item to show unread counts, activity, and more.
234
            </p>
235
            <DocsExample href="components/list-group/#with-badges">
236
              <CListGroup>
237
                <CListGroupItem className="d-flex justify-content-between align-items-center">
238
                  Cras justo odio
239
                  <CBadge color="primary" shape="rounded-pill">
240
                    14
241
                  </CBadge>
242
                </CListGroupItem>
243
                <CListGroupItem className="d-flex justify-content-between align-items-center">
244
                  Dapibus ac facilisis in
245
                  <CBadge color="primary" shape="rounded-pill">
246
                    2
247
                  </CBadge>
248
                </CListGroupItem>
249
                <CListGroupItem className="d-flex justify-content-between align-items-center">
250
                  Morbi leo risus
251
                  <CBadge color="primary" shape="rounded-pill">
252
                    1
253
                  </CBadge>
254
                </CListGroupItem>
255
              </CListGroup>
256
            </DocsExample>
257
          </CCardBody>
258
        </CCard>
259
      </CCol>
260
      <CCol xs={12}>
261
        <CCard className="mb-4">
262
          <CCardHeader>
263
            <strong>React List Group</strong> <small>Custom content</small>
264
          </CCardHeader>
265
          <CCardBody>
266
            <p className="text-body-secondary small">
267
              Add nearly any HTML within, even for linked list groups like the one below, with the
268
              help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
269
            </p>
270
            <DocsExample href="components/list-group/#custom-content">
271
              <CListGroup>
272
                <CListGroupItem as="a" href="#" active>
273
                  <div className="d-flex w-100 justify-content-between">
274
                    <h5 className="mb-1">List group item heading</h5>
275
                    <small>3 days ago</small>
276
                  </div>
277
                  <p className="mb-1">
278
                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
279
                    varius blandit.
280
                  </p>
281
                  <small>Donec id elit non mi porta.</small>
282
                </CListGroupItem>
283
                <CListGroupItem as="a" href="#">
284
                  <div className="d-flex w-100 justify-content-between">
285
                    <h5 className="mb-1">List group item heading</h5>
286
                    <small className="text-body-secondary">3 days ago</small>
287
                  </div>
288
                  <p className="mb-1">
289
                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
290
                    varius blandit.
291
                  </p>
292
                  <small className="text-body-secondary">Donec id elit non mi porta.</small>
293
                </CListGroupItem>
294
                <CListGroupItem as="a" href="#">
295
                  <div className="d-flex w-100 justify-content-between">
296
                    <h5 className="mb-1">List group item heading</h5>
297
                    <small className="text-body-secondary">3 days ago</small>
298
                  </div>
299
                  <p className="mb-1">
300
                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
301
                    varius blandit.
302
                  </p>
303
                  <small className="text-body-secondary">Donec id elit non mi porta.</small>
304
                </CListGroupItem>
305
              </CListGroup>
306
            </DocsExample>
307
          </CCardBody>
308
        </CCard>
309
      </CCol>
310
      <CCol xs={12}>
311
        <CCard className="mb-4">
312
          <CCardHeader>
313
            <strong>React List Group</strong> <small>Checkboxes and radios</small>
314
          </CCardHeader>
315
          <CCardBody>
316
            <p className="text-body-secondary small">
317
              Place CoreUI&#39;s checkboxes and radios within list group items and customize as
318
              needed.
319
            </p>
320
            <DocsExample href="components/list-group/#checkboxes-and-radios">
321
              <CListGroup>
322
                <CListGroupItem>
323
                  <CFormCheck label="Cras justo odio" />
324
                </CListGroupItem>
325
                <CListGroupItem>
326
                  <CFormCheck label="Dapibus ac facilisis in" defaultChecked />
327
                </CListGroupItem>
328
                <CListGroupItem>
329
                  <CFormCheck label="Morbi leo risus" defaultChecked />
330
                </CListGroupItem>
331
                <CListGroupItem>
332
                  <CFormCheck label="orta ac consectetur ac" />
333
                </CListGroupItem>
334
                <CListGroupItem>
335
                  <CFormCheck label="Vestibulum at eros" />
336
                </CListGroupItem>
337
              </CListGroup>
338
            </DocsExample>
339
          </CCardBody>
340
        </CCard>
341
      </CCol>
342
    </CRow>
343
  )
344
}
345

346
export default ListGroups
347