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 d7750f6

Browse filesBrowse files
mrholekmrholek
committed
docs(CAccordion): update documentation
1 parent 29e5aff commit d7750f6
Copy full SHA for d7750f6

File tree

5 files changed

+145
-122
lines changed
Filter options

5 files changed

+145
-122
lines changed

‎packages/docs/content/components/accordion/customizing.mdx

Copy file name to clipboardExpand all lines: packages/docs/content/components/accordion/customizing.mdx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const customVars = {
3434
'--cui-accordion-bg': '#f8f9fa',
3535
}
3636

37-
;<CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
37+
return <CAccordion style={customVars}>{/* Accordion content */}</CAccordion>
3838
```
3939

4040
### SASS variables

‎packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx

Copy file name to clipboard
+42Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
3+
4+
export const AccordionAlwaysOpenExample = () => {
5+
return (
6+
<CAccordion alwaysOpen activeItemKey={2}>
7+
<CAccordionItem itemKey={1}>
8+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
9+
<CAccordionBody>
10+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
11+
until the collapse plugin adds the appropriate classes that we use to style each element.
12+
These classes control the overall appearance, as well as the showing and hiding via CSS
13+
transitions. You can modify any of this with custom CSS or overriding our default
14+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
15+
<code>.accordion-body</code>, though the transition does limit overflow.
16+
</CAccordionBody>
17+
</CAccordionItem>
18+
<CAccordionItem itemKey={2}>
19+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
20+
<CAccordionBody>
21+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
22+
until the collapse plugin adds the appropriate classes that we use to style each element.
23+
These classes control the overall appearance, as well as the showing and hiding via CSS
24+
transitions. You can modify any of this with custom CSS or overriding our default
25+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
26+
<code>.accordion-body</code>, though the transition does limit overflow.
27+
</CAccordionBody>
28+
</CAccordionItem>
29+
<CAccordionItem itemKey={3}>
30+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
31+
<CAccordionBody>
32+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
33+
until the collapse plugin adds the appropriate classes that we use to style each element.
34+
These classes control the overall appearance, as well as the showing and hiding via CSS
35+
transitions. You can modify any of this with custom CSS or overriding our default
36+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
37+
<code>.accordion-body</code>, though the transition does limit overflow.
38+
</CAccordionBody>
39+
</CAccordionItem>
40+
</CAccordion>
41+
)
42+
}

‎packages/docs/content/components/accordion/examples/AccordionExample.tsx

Copy file name to clipboard
+42Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
3+
4+
export const AccordionExample = () => {
5+
return (
6+
<CAccordion activeItemKey={2}>
7+
<CAccordionItem itemKey={1}>
8+
<CAccordionHeader>Accordion Item #1 TSX</CAccordionHeader>
9+
<CAccordionBody>
10+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
11+
until the collapse plugin adds the appropriate classes that we use to style each element.
12+
These classes control the overall appearance, as well as the showing and hiding via CSS
13+
transitions. You can modify any of this with custom CSS or overriding our default
14+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
15+
<code>.accordion-body</code>, though the transition does limit overflow.
16+
</CAccordionBody>
17+
</CAccordionItem>
18+
<CAccordionItem itemKey={2}>
19+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
20+
<CAccordionBody>
21+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
22+
until the collapse plugin adds the appropriate classes that we use to style each element.
23+
These classes control the overall appearance, as well as the showing and hiding via CSS
24+
transitions. You can modify any of this with custom CSS or overriding our default
25+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
26+
<code>.accordion-body</code>, though the transition does limit overflow.
27+
</CAccordionBody>
28+
</CAccordionItem>
29+
<CAccordionItem itemKey={3}>
30+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
31+
<CAccordionBody>
32+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
33+
until the collapse plugin adds the appropriate classes that we use to style each element.
34+
These classes control the overall appearance, as well as the showing and hiding via CSS
35+
transitions. You can modify any of this with custom CSS or overriding our default
36+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
37+
<code>.accordion-body</code>, though the transition does limit overflow.
38+
</CAccordionBody>
39+
</CAccordionItem>
40+
</CAccordion>
41+
)
42+
}

‎packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx

Copy file name to clipboard
+42Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react'
3+
4+
export const AccordionFlushExample = () => {
5+
return (
6+
<CAccordion flush>
7+
<CAccordionItem itemKey={1}>
8+
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
9+
<CAccordionBody>
10+
<strong>This is the first item&#39;s accordion body.</strong> It is hidden by default,
11+
until the collapse plugin adds the appropriate classes that we use to style each element.
12+
These classes control the overall appearance, as well as the showing and hiding via CSS
13+
transitions. You can modify any of this with custom CSS or overriding our default
14+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
15+
<code>.accordion-body</code>, though the transition does limit overflow.
16+
</CAccordionBody>
17+
</CAccordionItem>
18+
<CAccordionItem itemKey={2}>
19+
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
20+
<CAccordionBody>
21+
<strong>This is the second item&#39;s accordion body.</strong> It is hidden by default,
22+
until the collapse plugin adds the appropriate classes that we use to style each element.
23+
These classes control the overall appearance, as well as the showing and hiding via CSS
24+
transitions. You can modify any of this with custom CSS or overriding our default
25+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
26+
<code>.accordion-body</code>, though the transition does limit overflow.
27+
</CAccordionBody>
28+
</CAccordionItem>
29+
<CAccordionItem itemKey={3}>
30+
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
31+
<CAccordionBody>
32+
<strong>This is the third item&#39;s accordion body.</strong> It is hidden by default,
33+
until the collapse plugin adds the appropriate classes that we use to style each element.
34+
These classes control the overall appearance, as well as the showing and hiding via CSS
35+
transitions. You can modify any of this with custom CSS or overriding our default
36+
variables. It&#39;s also worth noting that just about any HTML can go within the{' '}
37+
<code>.accordion-body</code>, though the transition does limit overflow.
38+
</CAccordionBody>
39+
</CAccordionItem>
40+
</CAccordion>
41+
)
42+
}

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

Copy file name to clipboardExpand all lines: packages/docs/content/components/accordion/index.mdx
+18-121Lines changed: 18 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -8,138 +8,35 @@ other_frameworks: accordion
88
pro_component: false
99
---
1010

11-
import { useState } from 'react'
12-
13-
import {
14-
CAccordion,
15-
CAccordionBody,
16-
CAccordionCollapse,
17-
CAccordionHeader,
18-
CAccordionItem,
19-
} from '@coreui/react/src/index'
20-
2111
## How to use React Accordion component.
2212

2313
Click the accordions below to expand/collapse the accordion content.
2414

25-
```jsx preview
26-
<CAccordion activeItemKey={2}>
27-
<CAccordionItem itemKey={1}>
28-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
29-
<CAccordionBody>
30-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
31-
collapse plugin adds the appropriate classes that we use to style each element. These classes
32-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
33-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
34-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
35-
does limit overflow.
36-
</CAccordionBody>
37-
</CAccordionItem>
38-
<CAccordionItem itemKey={2}>
39-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
40-
<CAccordionBody>
41-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
42-
collapse plugin adds the appropriate classes that we use to style each element. These classes
43-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
44-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
45-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
46-
does limit overflow.
47-
</CAccordionBody>
48-
</CAccordionItem>
49-
<CAccordionItem itemKey={3}>
50-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
51-
<CAccordionBody>
52-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
53-
collapse plugin adds the appropriate classes that we use to style each element. These classes
54-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
55-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
56-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
57-
does limit overflow.
58-
</CAccordionBody>
59-
</CAccordionItem>
60-
</CAccordion>
61-
```
15+
import { AccordionExample } from './examples/AccordionExample.tsx'
16+
import AccordionExampleTS from '!!raw-loader!./examples/AccordionExample.tsx'
17+
18+
<ExampleSnippet code={AccordionExampleTS} componentName="React Accordion">
19+
<AccordionExample />
20+
</ExampleSnippet>
6221

6322
### Flush
6423

6524
Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
6625

67-
```jsx preview
68-
<CAccordion flush>
69-
<CAccordionItem itemKey={1}>
70-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
71-
<CAccordionBody>
72-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
73-
collapse plugin adds the appropriate classes that we use to style each element. These classes
74-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
75-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
76-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
77-
does limit overflow.
78-
</CAccordionBody>
79-
</CAccordionItem>
80-
<CAccordionItem itemKey={2}>
81-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
82-
<CAccordionBody>
83-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
84-
collapse plugin adds the appropriate classes that we use to style each element. These classes
85-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
86-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
87-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
88-
does limit overflow.
89-
</CAccordionBody>
90-
</CAccordionItem>
91-
<CAccordionItem itemKey={3}>
92-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
93-
<CAccordionBody>
94-
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the
95-
collapse plugin adds the appropriate classes that we use to style each element. These classes
96-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
97-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
98-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
99-
does limit overflow.
100-
</CAccordionBody>
101-
</CAccordionItem>
102-
</CAccordion>
103-
```
26+
import { AccordionFlushExample } from './examples/AccordionFlushExample.tsx'
27+
import AccordionFlushExampleTS from '!!raw-loader!./examples/AccordionFlushExample.tsx'
28+
29+
<ExampleSnippet code={AccordionFlushExampleTS} componentName="React Accordion">
30+
<AccordionFlushExample />
31+
</ExampleSnippet>
10432

10533
### Always open
10634

10735
Add `alwaysOpen` property to make react accordion items stay open when another item is opened.
10836

109-
```jsx preview
110-
<CAccordion alwaysOpen activeItemKey={2}>
111-
<CAccordionItem itemKey={1}>
112-
<CAccordionHeader>Accordion Item #1</CAccordionHeader>
113-
<CAccordionBody>
114-
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the
115-
collapse plugin adds the appropriate classes that we use to style each element. These classes
116-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
117-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
118-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
119-
does limit overflow.
120-
</CAccordionBody>
121-
</CAccordionItem>
122-
<CAccordionItem itemKey={2}>
123-
<CAccordionHeader>Accordion Item #2</CAccordionHeader>
124-
<CAccordionBody>
125-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
126-
collapse plugin adds the appropriate classes that we use to style each element. These classes
127-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
128-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
129-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
130-
does limit overflow.
131-
</CAccordionBody>
132-
</CAccordionItem>
133-
<CAccordionItem itemKey={3}>
134-
<CAccordionHeader>Accordion Item #3</CAccordionHeader>
135-
<CAccordionBody>
136-
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the
137-
collapse plugin adds the appropriate classes that we use to style each element. These classes
138-
control the overall appearance, as well as the showing and hiding via CSS transitions. You can
139-
modify any of this with custom CSS or overriding our default variables. It's also worth noting
140-
that just about any HTML can go within the <code>.accordion-body</code>, though the transition
141-
does limit overflow.
142-
</CAccordionBody>
143-
</CAccordionItem>
144-
</CAccordion>
145-
```
37+
import { AccordionAlwaysOpenExample } from './examples/AccordionAlwaysOpenExample.tsx'
38+
import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlwaysOpenExample.tsx'
39+
40+
<ExampleSnippet code={AccordionAlwaysOpenExampleTS} componentName="React Accordion">
41+
<AccordionAlwaysOpenExample />
42+
</ExampleSnippet>

0 commit comments

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