coreui-free-react-admin-template

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

15
const Accordion = () => {
16
  return (
17
    <CRow>
18
      <CCol xs={12}>
19
        <CCard className="mb-4">
20
          <CCardHeader>
21
            <strong>React Accordion</strong>
22
          </CCardHeader>
23
          <CCardBody>
24
            <p className="text-body-secondary small">
25
              Click the accordions below to expand/collapse the accordion content.
26
            </p>
27
            <DocsExample href="components/accordion">
28
              <CAccordion activeItemKey={2}>
29
                <CAccordionItem itemKey={1}>
30
                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
31
                  <CAccordionBody>
32
                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
33
                    default, until the collapse plugin adds the appropriate classes that we use to
34
                    style each element. These classes control the overall appearance, as well as the
35
                    showing and hiding via CSS transitions. You can modify any of this with custom
36
                    CSS or overriding our default variables. It&#39;s also worth noting that just
37
                    about any HTML can go within the <code>.accordion-body</code>, though the
38
                    transition does limit overflow.
39
                  </CAccordionBody>
40
                </CAccordionItem>
41
                <CAccordionItem itemKey={2}>
42
                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
43
                  <CAccordionBody>
44
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
45
                    default, until the collapse plugin adds the appropriate classes that we use to
46
                    style each element. These classes control the overall appearance, as well as the
47
                    showing and hiding via CSS transitions. You can modify any of this with custom
48
                    CSS or overriding our default variables. It&#39;s also worth noting that just
49
                    about any HTML can go within the <code>.accordion-body</code>, though the
50
                    transition does limit overflow.
51
                  </CAccordionBody>
52
                </CAccordionItem>
53
                <CAccordionItem itemKey={3}>
54
                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
55
                  <CAccordionBody>
56
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
57
                    default, until the collapse plugin adds the appropriate classes that we use to
58
                    style each element. These classes control the overall appearance, as well as the
59
                    showing and hiding via CSS transitions. You can modify any of this with custom
60
                    CSS or overriding our default variables. It&#39;s also worth noting that just
61
                    about any HTML can go within the <code>.accordion-body</code>, though the
62
                    transition does limit overflow.
63
                  </CAccordionBody>
64
                </CAccordionItem>
65
              </CAccordion>
66
            </DocsExample>
67
          </CCardBody>
68
        </CCard>
69
        <CCard className="mb-4">
70
          <CCardHeader>
71
            <strong>React Accordion</strong> <small>Flush</small>
72
          </CCardHeader>
73
          <CCardBody>
74
            <p className="text-body-secondary small">
75
              Add <code>flush</code> to remove the default <code>background-color</code>, some
76
              borders, and some rounded corners to render accordions edge-to-edge with their parent
77
              container.
78
            </p>
79
            <DocsExample href="components/accordion#flush">
80
              <CAccordion flush>
81
                <CAccordionItem itemKey={1}>
82
                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
83
                  <CAccordionBody>
84
                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
85
                    default, until the collapse plugin adds the appropriate classes that we use to
86
                    style each element. These classes control the overall appearance, as well as the
87
                    showing and hiding via CSS transitions. You can modify any of this with custom
88
                    CSS or overriding our default variables. It&#39;s also worth noting that just
89
                    about any HTML can go within the <code>.accordion-body</code>, though the
90
                    transition does limit overflow.
91
                  </CAccordionBody>
92
                </CAccordionItem>
93
                <CAccordionItem itemKey={2}>
94
                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
95
                  <CAccordionBody>
96
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
97
                    default, until the collapse plugin adds the appropriate classes that we use to
98
                    style each element. These classes control the overall appearance, as well as the
99
                    showing and hiding via CSS transitions. You can modify any of this with custom
100
                    CSS or overriding our default variables. It&#39;s also worth noting that just
101
                    about any HTML can go within the <code>.accordion-body</code>, though the
102
                    transition does limit overflow.
103
                  </CAccordionBody>
104
                </CAccordionItem>
105
                <CAccordionItem itemKey={3}>
106
                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
107
                  <CAccordionBody>
108
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
109
                    default, until the collapse plugin adds the appropriate classes that we use to
110
                    style each element. These classes control the overall appearance, as well as the
111
                    showing and hiding via CSS transitions. You can modify any of this with custom
112
                    CSS or overriding our default variables. It&#39;s also worth noting that just
113
                    about any HTML can go within the <code>.accordion-body</code>, though the
114
                    transition does limit overflow.
115
                  </CAccordionBody>
116
                </CAccordionItem>
117
              </CAccordion>
118
            </DocsExample>
119
          </CCardBody>
120
        </CCard>
121
        <CCard className="mb-4">
122
          <CCardHeader>
123
            <strong>React Accordion</strong> <small>Always open</small>
124
          </CCardHeader>
125
          <CCardBody>
126
            <p className="text-body-secondary small">
127
              Add <code>alwaysOpen</code> property to make accordion items stay open when another
128
              item is opened.
129
            </p>
130
            <DocsExample href="components/accordion#flush">
131
              <CAccordion alwaysOpen>
132
                <CAccordionItem itemKey={1}>
133
                  <CAccordionHeader>Accordion Item #1</CAccordionHeader>
134
                  <CAccordionBody>
135
                    <strong>This is the first item&#39;s accordion body.</strong> It is hidden by
136
                    default, until the collapse plugin adds the appropriate classes that we use to
137
                    style each element. These classes control the overall appearance, as well as the
138
                    showing and hiding via CSS transitions. You can modify any of this with custom
139
                    CSS or overriding our default variables. It&#39;s also worth noting that just
140
                    about any HTML can go within the <code>.accordion-body</code>, though the
141
                    transition does limit overflow.
142
                  </CAccordionBody>
143
                </CAccordionItem>
144
                <CAccordionItem itemKey={2}>
145
                  <CAccordionHeader>Accordion Item #2</CAccordionHeader>
146
                  <CAccordionBody>
147
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
148
                    default, until the collapse plugin adds the appropriate classes that we use to
149
                    style each element. These classes control the overall appearance, as well as the
150
                    showing and hiding via CSS transitions. You can modify any of this with custom
151
                    CSS or overriding our default variables. It&#39;s also worth noting that just
152
                    about any HTML can go within the <code>.accordion-body</code>, though the
153
                    transition does limit overflow.
154
                  </CAccordionBody>
155
                </CAccordionItem>
156
                <CAccordionItem itemKey={3}>
157
                  <CAccordionHeader>Accordion Item #3</CAccordionHeader>
158
                  <CAccordionBody>
159
                    <strong>This is the second item&#39;s accordion body.</strong> It is hidden by
160
                    default, until the collapse plugin adds the appropriate classes that we use to
161
                    style each element. These classes control the overall appearance, as well as the
162
                    showing and hiding via CSS transitions. You can modify any of this with custom
163
                    CSS or overriding our default variables. It&#39;s also worth noting that just
164
                    about any HTML can go within the <code>.accordion-body</code>, though the
165
                    transition does limit overflow.
166
                  </CAccordionBody>
167
                </CAccordionItem>
168
              </CAccordion>
169
            </DocsExample>
170
          </CCardBody>
171
        </CCard>
172
      </CCol>
173
    </CRow>
174
  )
175
}
176

177
export default Accordion
178