coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CButton,
4
  CDropdown,
5
  CDropdownDivider,
6
  CDropdownItem,
7
  CDropdownMenu,
8
  CDropdownToggle,
9
  CButtonGroup,
10
  CButtonToolbar,
11
  CCard,
12
  CCardBody,
13
  CCardHeader,
14
  CCol,
15
  CFormCheck,
16
  CFormInput,
17
  CInputGroup,
18
  CInputGroupText,
19
  CRow,
20
} from '@coreui/react'
21
import { DocsExample } from 'src/components'
22

23
const ButtonGroups = () => {
24
  return (
25
    <CRow>
26
      <CCol xs={12}>
27
        <CCard className="mb-4">
28
          <CCardHeader>
29
            <strong>React Button Group</strong> <span>Basic example</span>
30
          </CCardHeader>
31
          <CCardBody>
32
            <p>
33
              Wrap a series of <code>&lt;CButton&gt;</code> components in{' '}
34
              <code>&lt;CButtonGroup&gt;</code>.{' '}
35
            </p>
36
            <DocsExample href="components/button-group">
37
              <CButtonGroup role="group" aria-label="Basic example">
38
                <CButton color="primary">Left</CButton>
39
                <CButton color="primary">Middle</CButton>
40
                <CButton color="primary">Right</CButton>
41
              </CButtonGroup>
42
            </DocsExample>
43
            <p>
44
              These classes can also be added to groups of links, as an alternative to the{' '}
45
              <code>&lt;CNav&gt;</code> components.
46
            </p>
47
            <DocsExample href="components/button-group">
48
              <CButtonGroup>
49
                <CButton href="#" color="primary" active>
50
                  Active link
51
                </CButton>
52
                <CButton href="#" color="primary">
53
                  Link
54
                </CButton>
55
                <CButton href="#" color="primary">
56
                  Link
57
                </CButton>
58
              </CButtonGroup>
59
            </DocsExample>
60
          </CCardBody>
61
        </CCard>
62
      </CCol>
63
      <CCol xs={12}>
64
        <CCard className="mb-4">
65
          <CCardHeader>
66
            <strong>React Button Group</strong> <span>Mixed styles</span>
67
          </CCardHeader>
68
          <CCardBody>
69
            <DocsExample href="components/button-group#mixed-styles">
70
              <CButtonGroup role="group" aria-label="Basic mixed styles example">
71
                <CButton color="danger">Left</CButton>
72
                <CButton color="warning">Middle</CButton>
73
                <CButton color="success">Right</CButton>
74
              </CButtonGroup>
75
            </DocsExample>
76
          </CCardBody>
77
        </CCard>
78
      </CCol>
79
      <CCol xs={12}>
80
        <CCard className="mb-4">
81
          <CCardHeader>
82
            <strong>React Button Group</strong> <span>Outlined styles</span>
83
          </CCardHeader>
84
          <CCardBody>
85
            <DocsExample href="components/button-group#outlined-styles">
86
              <CButtonGroup role="group" aria-label="Basic outlined example">
87
                <CButton color="primary" variant="outline">
88
                  Left
89
                </CButton>
90
                <CButton color="primary" variant="outline">
91
                  Middle
92
                </CButton>
93
                <CButton color="primary" variant="outline">
94
                  Right
95
                </CButton>
96
              </CButtonGroup>
97
            </DocsExample>
98
          </CCardBody>
99
        </CCard>
100
      </CCol>
101
      <CCol xs={12}>
102
        <CCard className="mb-4">
103
          <CCardHeader>
104
            <strong>React Button Group</strong> <span>Checkbox and radio button groups</span>
105
          </CCardHeader>
106
          <CCardBody>
107
            <p>
108
              Combine button-like checkbox and radio toggle buttons into a seamless looking button
109
              group.
110
            </p>
111
            <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
112
              <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
113
                <CFormCheck
114
                  button={{ variant: 'outline' }}
115
                  id="btncheck1"
116
                  autoComplete="off"
117
                  label="Checkbox 1"
118
                />
119
                <CFormCheck
120
                  button={{ variant: 'outline' }}
121
                  id="btncheck2"
122
                  autoComplete="off"
123
                  label="Checkbox 2"
124
                />
125
                <CFormCheck
126
                  button={{ variant: 'outline' }}
127
                  id="btncheck3"
128
                  autoComplete="off"
129
                  label="Checkbox 3"
130
                />
131
              </CButtonGroup>
132
            </DocsExample>
133
            <DocsExample href="components/button-group#checkbox-and-radio-button-groups">
134
              <CButtonGroup role="group" aria-label="Basic checkbox toggle button group">
135
                <CFormCheck
136
                  type="radio"
137
                  button={{ variant: 'outline' }}
138
                  name="btnradio"
139
                  id="btnradio1"
140
                  autoComplete="off"
141
                  label="Radio 1"
142
                />
143
                <CFormCheck
144
                  type="radio"
145
                  button={{ variant: 'outline' }}
146
                  name="btnradio"
147
                  id="btnradio2"
148
                  autoComplete="off"
149
                  label="Radio 2"
150
                />
151
                <CFormCheck
152
                  type="radio"
153
                  button={{ variant: 'outline' }}
154
                  name="btnradio"
155
                  id="btnradio3"
156
                  autoComplete="off"
157
                  label="Radio 3"
158
                />
159
              </CButtonGroup>
160
            </DocsExample>
161
          </CCardBody>
162
        </CCard>
163
      </CCol>
164
      <CCol xs={12}>
165
        <CCard className="mb-4">
166
          <CCardHeader>
167
            <strong>React Button Group</strong> <span>Button toolbar</span>
168
          </CCardHeader>
169
          <CCardBody>
170
            <p>
171
              Join sets of button groups into button toolbars for more complicated components. Use
172
              utility classes as needed to space out groups, buttons, and more.
173
            </p>
174
            <DocsExample href="components/button-group#button-toolbar">
175
              <CButtonToolbar role="group" aria-label="Toolbar with button groups">
176
                <CButtonGroup className="me-2" role="group" aria-label="First group">
177
                  <CButton color="primary">1</CButton>
178
                  <CButton color="primary">2</CButton>
179
                  <CButton color="primary">3</CButton>
180
                  <CButton color="primary">4</CButton>
181
                </CButtonGroup>
182
                <CButtonGroup className="me-2" role="group" aria-label="Second group">
183
                  <CButton color="secondary">5</CButton>
184
                  <CButton color="secondary">6</CButton>
185
                  <CButton color="secondary">7</CButton>
186
                </CButtonGroup>
187
                <CButtonGroup className="me-2" role="group" aria-label="Third group">
188
                  <CButton color="info">8</CButton>
189
                </CButtonGroup>
190
              </CButtonToolbar>
191
            </DocsExample>
192
            <p>
193
              Feel free to combine input groups with button groups in your toolbars. Similar to the
194
              example above, you’ll likely need some utilities through to space items correctly.
195
            </p>
196
            <DocsExample href="components/button-group#button-toolbar">
197
              <CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
198
                <CButtonGroup className="me-2" role="group" aria-label="First group">
199
                  <CButton color="secondary" variant="outline">
200
                    1
201
                  </CButton>
202
                  <CButton color="secondary" variant="outline">
203
                    2
204
                  </CButton>
205
                  <CButton color="secondary" variant="outline">
206
                    3
207
                  </CButton>
208
                  <CButton color="secondary" variant="outline">
209
                    4
210
                  </CButton>
211
                </CButtonGroup>
212
                <CInputGroup>
213
                  <CInputGroupText>@</CInputGroupText>
214
                  <CFormInput
215
                    placeholder="Input group example"
216
                    aria-label="Input group example"
217
                    aria-describedby="btnGroupAddon"
218
                  />
219
                </CInputGroup>
220
              </CButtonToolbar>
221
              <CButtonToolbar
222
                className="justify-content-between"
223
                role="group"
224
                aria-label="Toolbar with button groups"
225
              >
226
                <CButtonGroup className="me-2" role="group" aria-label="First group">
227
                  <CButton color="secondary" variant="outline">
228
                    1
229
                  </CButton>
230
                  <CButton color="secondary" variant="outline">
231
                    2
232
                  </CButton>
233
                  <CButton color="secondary" variant="outline">
234
                    3
235
                  </CButton>
236
                  <CButton color="secondary" variant="outline">
237
                    4
238
                  </CButton>
239
                </CButtonGroup>
240
                <CInputGroup>
241
                  <CInputGroupText>@</CInputGroupText>
242
                  <CFormInput
243
                    placeholder="Input group example"
244
                    aria-label="Input group example"
245
                    aria-describedby="btnGroupAddon"
246
                  />
247
                </CInputGroup>
248
              </CButtonToolbar>
249
            </DocsExample>
250
          </CCardBody>
251
        </CCard>
252
      </CCol>
253
      <CCol xs={12}>
254
        <CCard className="mb-4">
255
          <CCardHeader>
256
            <strong>React Button Group</strong> <span>Sizing</span>
257
          </CCardHeader>
258
          <CCardBody>
259
            <p>
260
              Alternatively, of implementing button sizing classes to each button in a group, set{' '}
261
              <code>size</code> property to all <code>&lt;CButtonGroup&gt;</code>&#39;s, including
262
              each one when nesting multiple groups.
263
            </p>
264
            <DocsExample href="components/button-group#sizing">
265
              <CButtonGroup size="lg" role="group" aria-label="Large button group">
266
                <CButton color="dark" variant="outline">
267
                  Left
268
                </CButton>
269
                <CButton color="dark" variant="outline">
270
                  Middle
271
                </CButton>
272
                <CButton color="dark" variant="outline">
273
                  Right
274
                </CButton>
275
              </CButtonGroup>
276
              <br />
277
              <CButtonGroup role="group" aria-label="Default button group">
278
                <CButton color="dark" variant="outline">
279
                  Left
280
                </CButton>
281
                <CButton color="dark" variant="outline">
282
                  Middle
283
                </CButton>
284
                <CButton color="dark" variant="outline">
285
                  Right
286
                </CButton>
287
              </CButtonGroup>
288
              <br />
289
              <CButtonGroup size="sm" role="group" aria-label="Small button group">
290
                <CButton color="dark" variant="outline">
291
                  Left
292
                </CButton>
293
                <CButton color="dark" variant="outline">
294
                  Middle
295
                </CButton>
296
                <CButton color="dark" variant="outline">
297
                  Right
298
                </CButton>
299
              </CButtonGroup>
300
            </DocsExample>
301
          </CCardBody>
302
        </CCard>
303
      </CCol>
304
      <CCol xs={12}>
305
        <CCard className="mb-4">
306
          <CCardHeader>
307
            <strong>React Button Group</strong> <span>Nesting</span>
308
          </CCardHeader>
309
          <CCardBody>
310
            <p className="text-body-secondary small">
311
              Put a <code>&lt;CButtonGroup&gt;</code> inside another{' '}
312
              <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
313
              of buttons.
314
            </p>
315
            <DocsExample href="components/button-group#nesting">
316
              <CButtonGroup role="group" aria-label="Button group with nested dropdown">
317
                <CButton color="primary">1</CButton>
318
                <CButton color="primary">2</CButton>
319
                <CDropdown variant="btn-group">
320
                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
321
                  <CDropdownMenu>
322
                    <CDropdownItem href="#">Action</CDropdownItem>
323
                    <CDropdownItem href="#">Another action</CDropdownItem>
324
                    <CDropdownItem href="#">Something else here</CDropdownItem>
325
                    <CDropdownDivider />
326
                    <CDropdownItem href="#">Separated link</CDropdownItem>
327
                  </CDropdownMenu>
328
                </CDropdown>
329
              </CButtonGroup>
330
            </DocsExample>
331
          </CCardBody>
332
        </CCard>
333
      </CCol>
334
      <CCol xs={12}>
335
        <CCard className="mb-4">
336
          <CCardHeader>
337
            <strong>React Button Group</strong> <span>Vertical variation</span>
338
          </CCardHeader>
339
          <CCardBody>
340
            <p className="text-body-secondary small">
341
              Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
342
              <strong>Split button dropdowns are not supported here.</strong>
343
            </p>
344
            <DocsExample href="components/button-group/#vertical-variation">
345
              <CButtonGroup vertical role="group" aria-label="Vertical button group">
346
                <CButton color="dark">Button</CButton>
347
                <CButton color="dark">Button</CButton>
348
                <CButton color="dark">Button</CButton>
349
                <CButton color="dark">Button</CButton>
350
                <CButton color="dark">Button</CButton>
351
                <CButton color="dark">Button</CButton>
352
                <CButton color="dark">Button</CButton>
353
              </CButtonGroup>
354
            </DocsExample>
355
            <DocsExample href="components/button-group/#vertical-variation">
356
              <CButtonGroup vertical role="group" aria-label="Vertical button group">
357
                <CButton color="primary">Button</CButton>
358
                <CButton color="primary">Button</CButton>
359
                <CDropdown variant="btn-group">
360
                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
361
                  <CDropdownMenu>
362
                    <CDropdownItem href="#">Action</CDropdownItem>
363
                    <CDropdownItem href="#">Another action</CDropdownItem>
364
                    <CDropdownItem href="#">Something else here</CDropdownItem>
365
                    <CDropdownDivider />
366
                    <CDropdownItem href="#">Separated link</CDropdownItem>
367
                  </CDropdownMenu>
368
                </CDropdown>
369
                <CButton color="primary">Button</CButton>
370
                <CButton color="primary">Button</CButton>
371
                <CDropdown variant="btn-group">
372
                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
373
                  <CDropdownMenu>
374
                    <CDropdownItem href="#">Action</CDropdownItem>
375
                    <CDropdownItem href="#">Another action</CDropdownItem>
376
                    <CDropdownItem href="#">Something else here</CDropdownItem>
377
                    <CDropdownDivider />
378
                    <CDropdownItem href="#">Separated link</CDropdownItem>
379
                  </CDropdownMenu>
380
                </CDropdown>
381
                <CDropdown variant="btn-group">
382
                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
383
                  <CDropdownMenu>
384
                    <CDropdownItem href="#">Action</CDropdownItem>
385
                    <CDropdownItem href="#">Another action</CDropdownItem>
386
                    <CDropdownItem href="#">Something else here</CDropdownItem>
387
                    <CDropdownDivider />
388
                    <CDropdownItem href="#">Separated link</CDropdownItem>
389
                  </CDropdownMenu>
390
                </CDropdown>
391
                <CDropdown variant="btn-group">
392
                  <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
393
                  <CDropdownMenu>
394
                    <CDropdownItem href="#">Action</CDropdownItem>
395
                    <CDropdownItem href="#">Another action</CDropdownItem>
396
                    <CDropdownItem href="#">Something else here</CDropdownItem>
397
                    <CDropdownDivider />
398
                    <CDropdownItem href="#">Separated link</CDropdownItem>
399
                  </CDropdownMenu>
400
                </CDropdown>
401
              </CButtonGroup>
402
            </DocsExample>
403
            <DocsExample href="components/button-group/#vertical-variation">
404
              <CButtonGroup vertical role="group" aria-label="Vertical button group">
405
                <CFormCheck
406
                  type="radio"
407
                  button={{ color: 'danger', variant: 'outline' }}
408
                  name="vbtnradio"
409
                  id="vbtnradio1"
410
                  autoComplete="off"
411
                  label="Radio 1"
412
                  defaultChecked
413
                />
414
                <CFormCheck
415
                  type="radio"
416
                  button={{ color: 'danger', variant: 'outline' }}
417
                  name="vbtnradio"
418
                  id="vbtnradio2"
419
                  autoComplete="off"
420
                  label="Radio 2"
421
                />
422
                <CFormCheck
423
                  type="radio"
424
                  button={{ color: 'danger', variant: 'outline' }}
425
                  name="vbtnradio"
426
                  id="vbtnradio3"
427
                  autoComplete="off"
428
                  label="Radio 3"
429
                />
430
              </CButtonGroup>
431
            </DocsExample>
432
          </CCardBody>
433
        </CCard>
434
      </CCol>
435
    </CRow>
436
  )
437
}
438

439
export default ButtonGroups
440