Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 4fc6b97

Browse filesBrowse files
mrholekmrholek
committed
docs: update content
1 parent fe0cbe5 commit 4fc6b97
Copy full SHA for 4fc6b97

File tree

89 files changed

+2674
-3403
lines changed
Filter options

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Dismiss banner

89 files changed

+2674
-3403
lines changed

‎packages/docs/content/components/card/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/card/index.mdx
+1-6Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,7 @@ Cards are built with as little markup and styles as possible but still manage to
1616

1717
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
1818

19-
import { CardExample } from './examples/CardExample.tsx'
20-
import CardExampleTS from '!!raw-loader!./examples/CardExample.tsx'
21-
22-
<ExampleSnippet code={CardExampleTS} componentName="React Card">
23-
<CardExample />
24-
</ExampleSnippet>
19+
<ExampleSnippet2 component="CardExample" componentName="React Card" />
2520

2621
## Content types
2722

‎packages/docs/content/components/collapse/examples/CollapseExample.tsx

Copy file name to clipboard
+32Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { useState } from 'react'
2+
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'
3+
4+
export const CollapseExample = () => {
5+
const [visible, setVisible] = useState(false)
6+
return (
7+
<>
8+
<CButton
9+
color="primary"
10+
href="#"
11+
onClick={(event) => {
12+
event.preventDefault()
13+
setVisible(!visible)
14+
}}
15+
>
16+
Link
17+
</CButton>
18+
<CButton color="primary" onClick={() => setVisible(!visible)}>
19+
Button
20+
</CButton>
21+
<CCollapse visible={visible}>
22+
<CCard className="mt-3">
23+
<CCardBody>
24+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
25+
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
26+
sapiente ea proident.
27+
</CCardBody>
28+
</CCard>
29+
</CCollapse>
30+
</>
31+
)
32+
}

‎packages/docs/content/components/collapse/examples/CollapseHorizontalExample.tsx

Copy file name to clipboard
+29Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useState } from 'react'
2+
import { CButton, CCollapse, CCard, CCardBody } from '@coreui/react'
3+
4+
export const CollapseHorizontalExample = () => {
5+
const [visible, setVisible] = useState(false)
6+
return (
7+
<>
8+
<CButton
9+
color="primary"
10+
className="mb-3"
11+
onClick={() => setVisible(!visible)}
12+
aria-expanded={visible}
13+
aria-controls="collapseWidthExample"
14+
>
15+
Button
16+
</CButton>
17+
<div style={{ minHeight: '120px' }}>
18+
<CCollapse id="collapseWidthExample" horizontal visible={visible}>
19+
<CCard style={{ width: '300px' }}>
20+
<CCardBody>
21+
This is some placeholder content for a horizontal collapse. It's hidden by default and
22+
shown when triggered.
23+
</CCardBody>
24+
</CCard>
25+
</CCollapse>
26+
</div>
27+
</>
28+
)
29+
}

‎packages/docs/content/components/collapse/examples/CollapseMultipleTargetsExample.tsx

Copy file name to clipboard
+50Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useState } from 'react'
2+
import { CButton, CCollapse, CCard, CCardBody, CCol, CRow } from '@coreui/react'
3+
4+
export const CollapseMultipleTargetsExample = () => {
5+
const [visibleA, setVisibleA] = useState(false)
6+
const [visibleB, setVisibleB] = useState(false)
7+
return (
8+
<>
9+
<CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
10+
Toggle first element
11+
</CButton>
12+
<CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
13+
Toggle second element
14+
</CButton>
15+
<CButton
16+
color="primary"
17+
onClick={() => {
18+
setVisibleA(!visibleA)
19+
setVisibleB(!visibleB)
20+
}}
21+
>
22+
Toggle both elements
23+
</CButton>
24+
<CRow>
25+
<CCol xs={6}>
26+
<CCollapse visible={visibleA}>
27+
<CCard className="mt-3">
28+
<CCardBody>
29+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
30+
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
31+
cred nesciunt sapiente ea proident.
32+
</CCardBody>
33+
</CCard>
34+
</CCollapse>
35+
</CCol>
36+
<CCol xs={6}>
37+
<CCollapse visible={visibleB}>
38+
<CCard className="mt-3">
39+
<CCardBody>
40+
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
41+
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
42+
cred nesciunt sapiente ea proident.
43+
</CCardBody>
44+
</CCard>
45+
</CCollapse>
46+
</CCol>
47+
</CRow>
48+
</>
49+
)
50+
}

‎packages/docs/content/components/collapse/index.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/collapse/index.mdx
+3-230Lines changed: 3 additions & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,6 @@ route: /components/collapse/
66
other_frameworks: collapse
77
---
88

9-
import { useState } from 'react'
10-
11-
import {
12-
CButton,
13-
CCard,
14-
CCardBody,
15-
CCol,
16-
CCollapse,
17-
CContainer,
18-
CRow,
19-
} from '@coreui/react/src/index'
20-
219
## How it works
2210

2311
The collapse component is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
@@ -26,234 +14,19 @@ The collapse component is used to show and hide content. Buttons or anchors are
2614

2715
You can use a link or a button component.
2816

29-
export const BasicExample = () => {
30-
const [visible, setVisible] = useState(false)
31-
return (
32-
<>
33-
<CButton
34-
color="primary"
35-
href="#"
36-
onClick={(event) => {
37-
event.preventDefault()
38-
setVisible(!visible)
39-
}}
40-
>
41-
Link
42-
</CButton>
43-
<CButton color="primary" onClick={() => setVisible(!visible)}>
44-
Button
45-
</CButton>
46-
<CCollapse visible={visible}>
47-
<CCard className="mt-3">
48-
<CCardBody>
49-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
50-
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
51-
sapiente ea proident.
52-
</CCardBody>
53-
</CCard>
54-
</CCollapse>
55-
</>
56-
)
57-
}
58-
59-
<Example>
60-
<BasicExample />
61-
</Example>
62-
63-
```jsx
64-
const [visible, setVisible] = useState(false)
65-
return (
66-
<>
67-
<CButton
68-
color="primary"
69-
href="#"
70-
onClick={(event) => {
71-
event.preventDefault()
72-
setVisible(!visible)
73-
}}
74-
>
75-
Link
76-
</CButton>
77-
<CButton color="primary" onClick={() => setVisible(!visible)}>
78-
Button
79-
</CButton>
80-
<CCollapse visible={visible}>
81-
<CCard className="mt-3">
82-
<CCardBody>
83-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
84-
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
85-
sapiente ea proident.
86-
</CCardBody>
87-
</CCard>
88-
</CCollapse>
89-
</>
90-
)
91-
```
17+
<ExampleSnippet2 component="CollapseExample" componentName="React Collapse" />
9218

9319
## Horizontal
9420

9521
The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
9622

97-
export const HorizontalExample = () => {
98-
const [visible, setVisible] = useState(false)
99-
return (
100-
<>
101-
<CButton
102-
color="primary"
103-
className="mb-3"
104-
onClick={() => setVisible(!visible)}
105-
aria-expanded={visible}
106-
aria-controls="collapseWidthExample"
107-
>
108-
Button
109-
</CButton>
110-
<div style={{ minHeight: '120px' }}>
111-
<CCollapse id="collapseWidthExample" horizontal visible={visible}>
112-
<CCard style={{ width: '300px' }}>
113-
<CCardBody>
114-
This is some placeholder content for a horizontal collapse. It's hidden by default and
115-
shown when triggered.
116-
</CCardBody>
117-
</CCard>
118-
</CCollapse>
119-
</div>
120-
</>
121-
)
122-
}
123-
124-
<Example>
125-
<HorizontalExample />
126-
</Example>
127-
128-
```jsx
129-
const [visible, setVisible] = useState(false)
130-
return (
131-
<>
132-
<CButton
133-
className="mb-3"
134-
onClick={() => setVisible(!visible)}
135-
aria-expanded={visible}
136-
aria-controls="collapseWidthExample"
137-
>
138-
Button
139-
</CButton>
140-
<div style={{ minHeight: '120px' }}>
141-
<CCollapse id="collapseWidthExample" horizontal visible={visible}>
142-
<CCard style={{ width: '300px' }}>
143-
<CCardBody>
144-
This is some placeholder content for a horizontal collapse. It's hidden by default and
145-
shown when triggered.
146-
</CCardBody>
147-
</CCard>
148-
</CCollapse>
149-
</div>
150-
</>
151-
)
152-
```
23+
<ExampleSnippet2 component="CollapseHorizontalExample" componentName="React Collapse" />
15324

15425
## Multiple targets
15526

15627
A `<CButton>` can show and hide multiple elements.
15728

158-
export const MultipleTargetsExample = () => {
159-
const [visibleA, setVisibleA] = useState(false)
160-
const [visibleB, setVisibleB] = useState(false)
161-
return (
162-
<>
163-
<CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
164-
Toggle first element
165-
</CButton>
166-
<CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
167-
Toggle second element
168-
</CButton>
169-
<CButton
170-
color="primary"
171-
onClick={() => {
172-
setVisibleA(!visibleA)
173-
setVisibleB(!visibleB)
174-
}}
175-
>
176-
Toggle both elements
177-
</CButton>
178-
<CRow>
179-
<CCol xs={6}>
180-
<CCollapse visible={visibleA}>
181-
<CCard className="mt-3">
182-
<CCardBody>
183-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
184-
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
185-
cred nesciunt sapiente ea proident.
186-
</CCardBody>
187-
</CCard>
188-
</CCollapse>
189-
</CCol>
190-
<CCol xs={6}>
191-
<CCollapse visible={visibleB}>
192-
<CCard className="mt-3">
193-
<CCardBody>
194-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
195-
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
196-
cred nesciunt sapiente ea proident.
197-
</CCardBody>
198-
</CCard>
199-
</CCollapse>
200-
</CCol>
201-
</CRow>
202-
</>
203-
)
204-
}
205-
206-
<Example>
207-
<MultipleTargetsExample />
208-
</Example>
209-
210-
```jsx
211-
const [visibleA, setVisibleA] = useState(false)
212-
const [visibleB, setVisibleB] = useState(false)
213-
return (
214-
<>
215-
<CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
216-
Toggle first element
217-
</CButton>
218-
<CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
219-
Toggle second element
220-
</CButton>
221-
<CButton
222-
color="primary"
223-
onClick={() => {
224-
setVisibleA(!visibleA)
225-
setVisibleB(!visibleB)
226-
}}
227-
>
228-
Toggle both elements
229-
</CButton>
230-
<CRow>
231-
<CCol xs={6}>
232-
<CCollapse visible={visibleA}>
233-
<CCard className="mt-3">
234-
<CCardBody>
235-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
236-
ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
237-
sapiente ea proident.
238-
</CCardBody>
239-
</CCard>
240-
</CCollapse>
241-
</CCol>
242-
<CCol xs={6}>
243-
<CCollapse visible={visibleB}>
244-
<CCard className="mt-3">
245-
<CCardBody>
246-
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
247-
ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
248-
sapiente ea proident.
249-
</CCardBody>
250-
</CCard>
251-
</CCollapse>
252-
</CCol>
253-
</CRow>
254-
</>
255-
)
256-
```
29+
<ExampleSnippet2 component="CollapseMultipleTargetsExample" componentName="React Collapse" />
25730

25831
## API
25932

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.