coreui-free-react-admin-template

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

5
const Collapses = () => {
6
  const [visible, setVisible] = useState(false)
7
  const [visibleHorizontal, setVisibleHorizontal] = useState(false)
8
  const [visibleA, setVisibleA] = useState(false)
9
  const [visibleB, setVisibleB] = useState(false)
10

11
  return (
12
    <CRow>
13
      <CCol xs={12}>
14
        <CCard className="mb-4">
15
          <CCardHeader>
16
            <strong>React Collapse</strong>
17
          </CCardHeader>
18
          <CCardBody>
19
            <p className="text-body-secondary small">You can use a link or a button component.</p>
20
            <DocsExample href="components/collapse">
21
              <CButton
22
                color="primary"
23
                href="#"
24
                onClick={(e) => {
25
                  e.preventDefault()
26
                  setVisible(!visible)
27
                }}
28
              >
29
                Link
30
              </CButton>
31
              <CButton color="primary" onClick={() => setVisible(!visible)}>
32
                Button
33
              </CButton>
34
              <CCollapse visible={visible}>
35
                <CCard className="mt-3">
36
                  <CCardBody>
37
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
38
                    richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
39
                    anderson cred nesciunt sapiente ea proident.
40
                  </CCardBody>
41
                </CCard>
42
              </CCollapse>
43
            </DocsExample>
44
          </CCardBody>
45
        </CCard>
46
      </CCol>
47
      <CCol xs={12}>
48
        <CCard className="mb-4">
49
          <CCardHeader>
50
            <strong>React Collapse</strong> <small> Horizontal</small>
51
          </CCardHeader>
52
          <CCardBody>
53
            <p className="text-body-secondary small">You can use a link or a button component.</p>
54
            <DocsExample href="components/collapse#horizontal">
55
              <CButton
56
                className="mb-3"
57
                color="primary"
58
                onClick={() => setVisibleHorizontal(!visibleHorizontal)}
59
                aria-expanded={visibleHorizontal}
60
                aria-controls="collapseWidthExample"
61
              >
62
                Button
63
              </CButton>
64
              <div style={{ minHeight: '120px' }}>
65
                <CCollapse id="collapseWidthExample" horizontal visible={visibleHorizontal}>
66
                  <CCard style={{ width: '300px' }}>
67
                    <CCardBody>
68
                      This is some placeholder content for a horizontal collapse. It&#39;s hidden by
69
                      default and shown when triggered.
70
                    </CCardBody>
71
                  </CCard>
72
                </CCollapse>
73
              </div>
74
            </DocsExample>
75
          </CCardBody>
76
        </CCard>
77
      </CCol>
78
      <CCol xs={12}>
79
        <CCard className="mb-4">
80
          <CCardHeader>
81
            <strong>React Collapse</strong> <small> multi target</small>
82
          </CCardHeader>
83
          <CCardBody>
84
            <p className="text-body-secondary small">
85
              A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
86
            </p>
87
            <DocsExample href="components/collapse#multiple-targets">
88
              <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
89
                Toggle first element
90
              </CButton>
91
              <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
92
                Toggle second element
93
              </CButton>
94
              <CButton
95
                color="primary"
96
                onClick={() => {
97
                  setVisibleA(!visibleA)
98
                  setVisibleB(!visibleB)
99
                }}
100
              >
101
                Toggle both elements
102
              </CButton>
103
              <CRow>
104
                <CCol xs={6}>
105
                  <CCollapse visible={visibleA}>
106
                    <CCard className="mt-3">
107
                      <CCardBody>
108
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
109
                        richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
110
                        anderson cred nesciunt sapiente ea proident.
111
                      </CCardBody>
112
                    </CCard>
113
                  </CCollapse>
114
                </CCol>
115
                <CCol xs={6}>
116
                  <CCollapse visible={visibleB}>
117
                    <CCard className="mt-3">
118
                      <CCardBody>
119
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
120
                        richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
121
                        anderson cred nesciunt sapiente ea proident.
122
                      </CCardBody>
123
                    </CCard>
124
                  </CCollapse>
125
                </CCol>
126
              </CRow>
127
            </DocsExample>
128
          </CCardBody>
129
        </CCard>
130
      </CCol>
131
    </CRow>
132
  )
133
}
134

135
export default Collapses
136