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