coreui-free-react-admin-template

1
import React from 'react'
2
import { CButton, CCard, CCardBody, CCardHeader, CPopover, CRow, CCol } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const Popovers = () => {
6
  return (
7
    <CRow>
8
      <CCol xs={12}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Popover</strong> <small>Basic example</small>
12
          </CCardHeader>
13
          <CCardBody>
14
            <DocsExample href="components/popover">
15
              <CPopover
16
                title="Popover title"
17
                content="And here’s some amazing content. It’s very engaging. Right?"
18
                placement="right"
19
              >
20
                <CButton color="danger" size="lg">
21
                  Click to toggle popover
22
                </CButton>
23
              </CPopover>
24
            </DocsExample>
25
          </CCardBody>
26
        </CCard>
27
      </CCol>
28
      <CCol xs={12}>
29
        <CCard className="mb-4">
30
          <CCardHeader>
31
            <strong>React Popover</strong> <small>Four directions</small>
32
          </CCardHeader>
33
          <CCardBody>
34
            <p className="text-body-secondary small">
35
              Four options are available: top, right, bottom, and left aligned. Directions are
36
              mirrored when using CoreUI for React in RTL.
37
            </p>
38
            <DocsExample href="components/popover#four-directions">
39
              <CPopover
40
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
41
                placement="top"
42
              >
43
                <CButton color="secondary">Popover on top</CButton>
44
              </CPopover>
45
              <CPopover
46
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
47
                placement="right"
48
              >
49
                <CButton color="secondary">Popover on right</CButton>
50
              </CPopover>
51
              <CPopover
52
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
53
                placement="bottom"
54
              >
55
                <CButton color="secondary">Popover on bottom</CButton>
56
              </CPopover>
57
              <CPopover
58
                content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
59
                placement="left"
60
              >
61
                <CButton color="secondary">Popover on left</CButton>
62
              </CPopover>
63
            </DocsExample>
64
          </CCardBody>
65
        </CCard>
66
      </CCol>
67
    </CRow>
68
  )
69
}
70

71
export default Popovers
72