coreui-free-react-admin-template

1
import React, { useState } from 'react'
2
import {
3
  CButton,
4
  CCard,
5
  CCardBody,
6
  CCardHeader,
7
  CCol,
8
  CLink,
9
  CModal,
10
  CModalBody,
11
  CModalFooter,
12
  CModalHeader,
13
  CModalTitle,
14
  CPopover,
15
  CRow,
16
  CTooltip,
17
} from '@coreui/react'
18
import { DocsExample } from 'src/components'
19

20
const LiveDemo = () => {
21
  const [visible, setVisible] = useState(false)
22
  return (
23
    <>
24
      <CButton color="primary" onClick={() => setVisible(!visible)}>
25
        Launch demo modal
26
      </CButton>
27
      <CModal visible={visible} onClose={() => setVisible(false)}>
28
        <CModalHeader>
29
          <CModalTitle>Modal title</CModalTitle>
30
        </CModalHeader>
31
        <CModalBody>Woohoo, you&#39;re reading this text in a modal!</CModalBody>
32
        <CModalFooter>
33
          <CButton color="secondary" onClick={() => setVisible(false)}>
34
            Close
35
          </CButton>
36
          <CButton color="primary">Save changes</CButton>
37
        </CModalFooter>
38
      </CModal>
39
    </>
40
  )
41
}
42

43
const StaticBackdrop = () => {
44
  const [visible, setVisible] = useState(false)
45
  return (
46
    <>
47
      <CButton color="primary" onClick={() => setVisible(!visible)}>
48
        Launch static backdrop modal
49
      </CButton>
50
      <CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
51
        <CModalHeader>
52
          <CModalTitle>Modal title</CModalTitle>
53
        </CModalHeader>
54
        <CModalBody>
55
          I will not close if you click outside me. Don&#39;teven try to press escape key.
56
        </CModalBody>
57
        <CModalFooter>
58
          <CButton color="secondary" onClick={() => setVisible(false)}>
59
            Close
60
          </CButton>
61
          <CButton color="primary">Save changes</CButton>
62
        </CModalFooter>
63
      </CModal>
64
    </>
65
  )
66
}
67

68
const ScrollingLongContent = () => {
69
  const [visible, setVisible] = useState(false)
70
  return (
71
    <>
72
      <CButton color="primary" onClick={() => setVisible(!visible)}>
73
        Launch demo modal
74
      </CButton>
75
      <CModal visible={visible} onClose={() => setVisible(false)}>
76
        <CModalHeader>
77
          <CModalTitle>Modal title</CModalTitle>
78
        </CModalHeader>
79
        <CModalBody>
80
          <p>
81
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
82
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
83
          </p>
84
          <p>
85
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
86
            lacus vel augue laoreet rutrum faucibus dolor auctor.
87
          </p>
88
          <p>
89
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
90
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
91
            auctor fringilla.
92
          </p>
93
          <p>
94
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
95
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
96
          </p>
97
          <p>
98
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
99
            lacus vel augue laoreet rutrum faucibus dolor auctor.
100
          </p>
101
          <p>
102
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
103
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
104
            auctor fringilla.
105
          </p>
106
          <p>
107
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
108
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
109
          </p>
110
          <p>
111
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
112
            lacus vel augue laoreet rutrum faucibus dolor auctor.
113
          </p>
114
          <p>
115
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
116
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
117
            auctor fringilla.
118
          </p>
119
          <p>
120
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
121
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
122
          </p>
123
          <p>
124
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
125
            lacus vel augue laoreet rutrum faucibus dolor auctor.
126
          </p>
127
          <p>
128
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
129
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
130
            auctor fringilla.
131
          </p>
132
          <p>
133
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
134
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
135
          </p>
136
          <p>
137
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
138
            lacus vel augue laoreet rutrum faucibus dolor auctor.
139
          </p>
140
          <p>
141
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
142
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
143
            auctor fringilla.
144
          </p>
145
          <p>
146
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
147
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
148
          </p>
149
          <p>
150
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
151
            lacus vel augue laoreet rutrum faucibus dolor auctor.
152
          </p>
153
          <p>
154
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
155
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
156
            auctor fringilla.
157
          </p>
158
        </CModalBody>
159
        <CModalFooter>
160
          <CButton color="secondary" onClick={() => setVisible(false)}>
161
            Close
162
          </CButton>
163
          <CButton color="primary">Save changes</CButton>
164
        </CModalFooter>
165
      </CModal>
166
    </>
167
  )
168
}
169

170
const ScrollingLongContent2 = () => {
171
  const [visible, setVisible] = useState(false)
172
  return (
173
    <>
174
      <CButton color="primary" onClick={() => setVisible(!visible)}>
175
        Launch demo modal
176
      </CButton>
177
      <CModal scrollable visible={visible} onClose={() => setVisible(false)}>
178
        <CModalHeader>
179
          <CModalTitle>Modal title</CModalTitle>
180
        </CModalHeader>
181
        <CModalBody>
182
          <p>
183
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
184
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
185
          </p>
186
          <p>
187
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
188
            lacus vel augue laoreet rutrum faucibus dolor auctor.
189
          </p>
190
          <p>
191
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
192
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
193
            auctor fringilla.
194
          </p>
195
          <p>
196
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
197
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
198
          </p>
199
          <p>
200
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
201
            lacus vel augue laoreet rutrum faucibus dolor auctor.
202
          </p>
203
          <p>
204
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
205
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
206
            auctor fringilla.
207
          </p>
208
          <p>
209
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
210
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
211
          </p>
212
          <p>
213
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
214
            lacus vel augue laoreet rutrum faucibus dolor auctor.
215
          </p>
216
          <p>
217
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
218
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
219
            auctor fringilla.
220
          </p>
221
          <p>
222
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
223
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
224
          </p>
225
          <p>
226
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
227
            lacus vel augue laoreet rutrum faucibus dolor auctor.
228
          </p>
229
          <p>
230
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
231
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
232
            auctor fringilla.
233
          </p>
234
          <p>
235
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
236
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
237
          </p>
238
          <p>
239
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
240
            lacus vel augue laoreet rutrum faucibus dolor auctor.
241
          </p>
242
          <p>
243
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
244
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
245
            auctor fringilla.
246
          </p>
247
          <p>
248
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
249
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
250
          </p>
251
          <p>
252
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
253
            lacus vel augue laoreet rutrum faucibus dolor auctor.
254
          </p>
255
          <p>
256
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
257
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
258
            auctor fringilla.
259
          </p>
260
        </CModalBody>
261
        <CModalFooter>
262
          <CButton color="secondary" onClick={() => setVisible(false)}>
263
            Close
264
          </CButton>
265
          <CButton color="primary">Save changes</CButton>
266
        </CModalFooter>
267
      </CModal>
268
    </>
269
  )
270
}
271

272
const VerticallyCentered = () => {
273
  const [visible, setVisible] = useState(false)
274
  return (
275
    <>
276
      <CButton color="primary" onClick={() => setVisible(!visible)}>
277
        Vertically centered modal
278
      </CButton>
279
      <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
280
        <CModalHeader>
281
          <CModalTitle>Modal title</CModalTitle>
282
        </CModalHeader>
283
        <CModalBody>
284
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
285
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
286
        </CModalBody>
287
        <CModalFooter>
288
          <CButton color="secondary" onClick={() => setVisible(false)}>
289
            Close
290
          </CButton>
291
          <CButton color="primary">Save changes</CButton>
292
        </CModalFooter>
293
      </CModal>
294
    </>
295
  )
296
}
297

298
const VerticallyCentered2 = () => {
299
  const [visible, setVisible] = useState(false)
300
  return (
301
    <>
302
      <CButton color="primary" onClick={() => setVisible(!visible)}>
303
        Vertically centered scrollable modal
304
      </CButton>
305
      <CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
306
        <CModalHeader>
307
          <CModalTitle>Modal title</CModalTitle>
308
        </CModalHeader>
309
        <CModalBody>
310
          <p>
311
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
312
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
313
          </p>
314
          <p>
315
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
316
            lacus vel augue laoreet rutrum faucibus dolor auctor.
317
          </p>
318
          <p>
319
            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
320
            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
321
            auctor fringilla.
322
          </p>
323
          <p>
324
            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
325
            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
326
          </p>
327
          <p>
328
            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
329
            lacus vel augue laoreet rutrum faucibus dolor auctor.
330
          </p>
331
        </CModalBody>
332
        <CModalFooter>
333
          <CButton color="secondary" onClick={() => setVisible(false)}>
334
            Close
335
          </CButton>
336
          <CButton color="primary">Save changes</CButton>
337
        </CModalFooter>
338
      </CModal>
339
    </>
340
  )
341
}
342

343
const TooltipsPopovers = () => {
344
  const [visible, setVisible] = useState(false)
345
  return (
346
    <>
347
      <CButton color="primary" onClick={() => setVisible(!visible)}>
348
        Launch demo modal
349
      </CButton>
350
      <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
351
        <CModalHeader>
352
          <CModalTitle>Modal title</CModalTitle>
353
        </CModalHeader>
354
        <CModalBody>
355
          <h5>Popover in a modal</h5>
356
          <p>
357
            This
358
            <CPopover title="Popover title" content="Popover body content is set in this property.">
359
              <CButton color="primary">button</CButton>
360
            </CPopover>{' '}
361
            triggers a popover on click.
362
          </p>
363
          <hr />
364
          <h5>Tooltips in a modal</h5>
365
          <p>
366
            <CTooltip content="Tooltip">
367
              <CLink>This link</CLink>
368
            </CTooltip>{' '}
369
            and
370
            <CTooltip content="Tooltip">
371
              <CLink>that link</CLink>
372
            </CTooltip>{' '}
373
            have tooltips on hover.
374
          </p>
375
        </CModalBody>
376
        <CModalFooter>
377
          <CButton color="secondary" onClick={() => setVisible(false)}>
378
            Close
379
          </CButton>
380
          <CButton color="primary">Save changes</CButton>
381
        </CModalFooter>
382
      </CModal>
383
    </>
384
  )
385
}
386

387
const OptionalSizes = () => {
388
  const [visibleXL, setVisibleXL] = useState(false)
389
  const [visibleLg, setVisibleLg] = useState(false)
390
  const [visibleSm, setVisibleSm] = useState(false)
391
  return (
392
    <>
393
      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
394
        Extra large modal
395
      </CButton>
396
      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
397
        Large modal
398
      </CButton>
399
      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
400
        Small large modal
401
      </CButton>
402
      <CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
403
        <CModalHeader>
404
          <CModalTitle>Extra large modal</CModalTitle>
405
        </CModalHeader>
406
        <CModalBody>...</CModalBody>
407
      </CModal>
408
      <CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
409
        <CModalHeader>
410
          <CModalTitle>Large modal</CModalTitle>
411
        </CModalHeader>
412
        <CModalBody>...</CModalBody>
413
      </CModal>
414
      <CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
415
        <CModalHeader>
416
          <CModalTitle>Small modal</CModalTitle>
417
        </CModalHeader>
418
        <CModalBody>...</CModalBody>
419
      </CModal>
420
    </>
421
  )
422
}
423

424
const FullscreenModal = () => {
425
  const [visible, setVisible] = useState(false)
426
  const [visibleSm, setVisibleSm] = useState(false)
427
  const [visibleMd, setVisibleMd] = useState(false)
428
  const [visibleLg, setVisibleLg] = useState(false)
429
  const [visibleXL, setVisibleXL] = useState(false)
430
  const [visibleXXL, setVisibleXXL] = useState(false)
431

432
  return (
433
    <>
434
      <CButton color="primary" onClick={() => setVisible(!visible)}>
435
        Full screen
436
      </CButton>
437
      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
438
        Full screen below sm
439
      </CButton>
440
      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
441
        Full screen below md
442
      </CButton>
443
      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
444
        Full screen below lg
445
      </CButton>
446
      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
447
        Full screen below xl
448
      </CButton>
449
      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
450
        Full screen below xxl
451
      </CButton>
452
      <CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
453
        <CModalHeader>
454
          <CModalTitle>Full screen</CModalTitle>
455
        </CModalHeader>
456
        <CModalBody>...</CModalBody>
457
      </CModal>
458
      <CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
459
        <CModalHeader>
460
          <CModalTitle>Full screen below sm</CModalTitle>
461
        </CModalHeader>
462
        <CModalBody>...</CModalBody>
463
      </CModal>
464
      <CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
465
        <CModalHeader>
466
          <CModalTitle>Full screen below md</CModalTitle>
467
        </CModalHeader>
468
        <CModalBody>...</CModalBody>
469
      </CModal>
470
      <CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
471
        <CModalHeader>
472
          <CModalTitle>Full screen below lg</CModalTitle>
473
        </CModalHeader>
474
        <CModalBody>...</CModalBody>
475
      </CModal>
476
      <CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
477
        <CModalHeader>
478
          <CModalTitle>Full screen below xl</CModalTitle>
479
        </CModalHeader>
480
        <CModalBody>...</CModalBody>
481
      </CModal>
482
      <CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
483
        <CModalHeader>
484
          <CModalTitle>Full screen below xxl</CModalTitle>
485
        </CModalHeader>
486
        <CModalBody>...</CModalBody>
487
      </CModal>
488
    </>
489
  )
490
}
491

492
const Modals = () => {
493
  return (
494
    <CRow>
495
      <CCol xs={12}>
496
        <CCard className="mb-4">
497
          <CCardHeader>
498
            <strong>React Modal</strong>
499
          </CCardHeader>
500
          <CCardBody>
501
            <p className="text-body-secondary small">
502
              Below is a static modal example (meaning its <code>position</code> and{' '}
503
              <code>display</code> have been overridden). Included are the modal header, modal body
504
              (required for <code>padding</code>), and modal footer (optional). We ask that you
505
              include modal headers with dismiss actions whenever possible, or provide another
506
              explicit dismiss action.
507
            </p>
508
            <DocsExample href="components/modal">
509
              <CModal
510
                className="show d-block position-static"
511
                backdrop={false}
512
                keyboard={false}
513
                portal={false}
514
                visible
515
              >
516
                <CModalHeader>
517
                  <CModalTitle>Modal title</CModalTitle>
518
                </CModalHeader>
519
                <CModalBody>Modal body text goes here.</CModalBody>
520
                <CModalFooter>
521
                  <CButton color="secondary">Close</CButton>
522
                  <CButton color="primary">Save changes</CButton>
523
                </CModalFooter>
524
              </CModal>
525
            </DocsExample>
526
          </CCardBody>
527
        </CCard>
528
      </CCol>
529
      <CCol xs={12}>
530
        <CCard className="mb-4">
531
          <CCardHeader>
532
            <strong>React Modal</strong> <small>Live demo</small>
533
          </CCardHeader>
534
          <CCardBody>
535
            <p className="text-body-secondary small">
536
              Toggle a working modal demo by clicking the button below. It will slide down and fade
537
              in from the top of the page.
538
            </p>
539
            <DocsExample href="components/modal#live-demo">{LiveDemo()}</DocsExample>
540
          </CCardBody>
541
        </CCard>
542
      </CCol>
543
      <CCol xs={12}>
544
        <CCard className="mb-4">
545
          <CCardHeader>
546
            <strong>React Modal</strong> <small>Static backdrop</small>
547
          </CCardHeader>
548
          <CCardBody>
549
            <p className="text-body-secondary small">
550
              If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
551
              modal will behave as though the backdrop is static, meaning it will not close when
552
              clicking outside it. Click the button below to try it.
553
            </p>
554
            <DocsExample href="components/modal#static-backdrop">{StaticBackdrop()}</DocsExample>
555
          </CCardBody>
556
        </CCard>
557
      </CCol>
558
      <CCol xs={12}>
559
        <CCard className="mb-4">
560
          <CCardHeader>
561
            <strong>React Modal</strong> <small>Scrolling long content</small>
562
          </CCardHeader>
563
          <CCardBody>
564
            <p className="text-body-secondary small">
565
              If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
566
              modal will behave as though the backdrop is static, meaning it will not close when
567
              clicking outside it. Click the button below to try it.
568
            </p>
569
            <DocsExample href="components/modal#scrolling-long-content">
570
              {ScrollingLongContent()}
571
            </DocsExample>
572
            <p className="text-body-secondary small">
573
              You can also create a scrollable modal that allows scroll the modal body by adding{' '}
574
              <code>scrollable</code> prop.
575
            </p>
576
            <DocsExample href="components/modal#scrolling-long-content">
577
              {ScrollingLongContent2()}
578
            </DocsExample>
579
          </CCardBody>
580
        </CCard>
581
      </CCol>
582
      <CCol xs={12}>
583
        <CCard className="mb-4">
584
          <CCardHeader>
585
            <strong>React Modal</strong> <small>Vertically centered</small>
586
          </CCardHeader>
587
          <CCardBody>
588
            <p className="text-body-secondary small">
589
              Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
590
              vertically center the modal.
591
            </p>
592
            <DocsExample href="components/modal#vertically-centered">
593
              {VerticallyCentered()}
594
            </DocsExample>
595
            <DocsExample href="components/modal#vertically-centered">
596
              {VerticallyCentered2()}
597
            </DocsExample>
598
          </CCardBody>
599
        </CCard>
600
      </CCol>
601
      <CCol xs={12}>
602
        <CCard className="mb-4">
603
          <CCardHeader>
604
            <strong>React Modal</strong> <small>Tooltips and popovers</small>
605
          </CCardHeader>
606
          <CCardBody>
607
            <p className="text-body-secondary small">
608
              <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
609
              modals as needed. When modals are closed, any tooltips and popovers within are also
610
              automatically dismissed.
611
            </p>
612
            <DocsExample href="components/modal#tooltips-and-popovers">
613
              {TooltipsPopovers()}
614
            </DocsExample>
615
          </CCardBody>
616
        </CCard>
617
      </CCol>
618
      <CCol xs={12}>
619
        <CCard className="mb-4">
620
          <CCardHeader>
621
            <strong>React Modal</strong> <small>Optional sizes</small>
622
          </CCardHeader>
623
          <CCardBody>
624
            <p className="text-body-secondary small">
625
              Modals have three optional sizes, available via modifier classes to be placed on a{' '}
626
              <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
627
              horizontal scrollbars on narrower viewports.
628
            </p>
629
            <table className="table">
630
              <thead>
631
                <tr>
632
                  <th>Size</th>
633
                  <th>Property size</th>
634
                  <th>Modal max-width</th>
635
                </tr>
636
              </thead>
637
              <tbody>
638
                <tr>
639
                  <td>Small</td>
640
                  <td>
641
                    <code>&#39;sm&#39;</code>
642
                  </td>
643
                  <td>
644
                    <code>300px</code>
645
                  </td>
646
                </tr>
647
                <tr>
648
                  <td>Default</td>
649
                  <td className="text-body-secondary">None</td>
650
                  <td>
651
                    <code>500px</code>
652
                  </td>
653
                </tr>
654
                <tr>
655
                  <td>Large</td>
656
                  <td>
657
                    <code>&#39;lg&#39;</code>
658
                  </td>
659
                  <td>
660
                    <code>800px</code>
661
                  </td>
662
                </tr>
663
                <tr>
664
                  <td>Extra large</td>
665
                  <td>
666
                    <code>&#39;xl&#39;</code>
667
                  </td>
668
                  <td>
669
                    <code>1140px</code>
670
                  </td>
671
                </tr>
672
              </tbody>
673
            </table>
674
            <DocsExample href="components/modal#optional-sizes">{OptionalSizes()}</DocsExample>
675
          </CCardBody>
676
        </CCard>
677
      </CCol>
678
      <CCol xs={12}>
679
        <CCard className="mb-4">
680
          <CCardHeader>
681
            <strong>React Modal</strong> <small>Fullscreen Modal</small>
682
          </CCardHeader>
683
          <CCardBody>
684
            <p className="text-body-secondary small">
685
              Another override is the option to pop up a modal that covers the user viewport,
686
              available via property <code>fullscrean</code>.
687
            </p>
688
            <table className="table">
689
              <thead>
690
                <tr>
691
                  <th>Property fullscrean</th>
692
                  <th>Availability</th>
693
                </tr>
694
              </thead>
695
              <tbody>
696
                <tr>
697
                  <td>
698
                    <code>true</code>
699
                  </td>
700
                  <td>Always</td>
701
                </tr>
702
                <tr>
703
                  <td>
704
                    <code>&#39;sm&#39;</code>
705
                  </td>
706
                  <td>
707
                    Below <code>576px</code>
708
                  </td>
709
                </tr>
710
                <tr>
711
                  <td>
712
                    <code>&#39;md&#39;</code>
713
                  </td>
714
                  <td>
715
                    Below <code>768px</code>
716
                  </td>
717
                </tr>
718
                <tr>
719
                  <td>
720
                    <code>&#39;lg&#39;</code>
721
                  </td>
722
                  <td>
723
                    Below <code>992px</code>
724
                  </td>
725
                </tr>
726
                <tr>
727
                  <td>
728
                    <code>&#39;xl&#39;</code>
729
                  </td>
730
                  <td>
731
                    Below <code>1200px</code>
732
                  </td>
733
                </tr>
734
                <tr>
735
                  <td>
736
                    <code>&#39;xxl&#39;</code>
737
                  </td>
738
                  <td>
739
                    Below <code>1400px</code>
740
                  </td>
741
                </tr>
742
              </tbody>
743
            </table>
744
            <DocsExample href="components/modal#fullscreen-modal">{FullscreenModal()}</DocsExample>
745
          </CCardBody>
746
        </CCard>
747
      </CCol>
748
    </CRow>
749
  )
750
}
751

752
export default Modals
753