Skip to content

Commit a2fdaa9

Browse files
KMNowakKMNowak
committed
docs(accordion): add examples and props to the table
1 parent ba9e199 commit a2fdaa9

File tree

6 files changed

+178
-0
lines changed

6 files changed

+178
-0
lines changed

‎apps/docs/content/components/accordion/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import indicatorFunction from "./indicator-function";
1414
import customMotion from "./custom-motion";
1515
import controlled from "./controlled";
1616
import customStyles from "./custom-styles";
17+
import transitionDuration from "./transition-duration";
18+
import scrollOnOpen from "./scroll-on-open";
1719

1820
export const accordionContent = {
1921
usage,
@@ -32,4 +34,6 @@ export const accordionContent = {
3234
customMotion,
3335
controlled,
3436
customStyles,
37+
transitionDuration,
38+
scrollOnOpen,
3539
};

‎apps/docs/content/components/accordion/scroll-on-open.raw.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import {Accordion, AccordionItem, Button} from "@heroui/react";
2+
3+
export default function App() {
4+
const defaultContent =
5+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6+
7+
return (
8+
<div className="w-full grid grid-cols-12 gap-4">
9+
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
10+
<h3>Without Scroll on Open</h3>
11+
<div className="h-64 overflow-auto p-4 border rounded-lg">
12+
<div className="mb-32">
13+
<p className="mb-4 text-sm text-gray-600">
14+
Scroll down to see the accordion. When you expand items, they won&apos;t automatically
15+
scroll into view.
16+
</p>
17+
</div>
18+
<Accordion>
19+
<AccordionItem key="1" aria-label="Accordion 1" title="Regular Accordion Item">
20+
<div className="p-2">
21+
<p className="mb-4">{defaultContent}</p>
22+
<Button color="primary" size="sm">
23+
This content might be out of view
24+
</Button>
25+
</div>
26+
</AccordionItem>
27+
<AccordionItem key="2" aria-label="Accordion 2" title="Another Item">
28+
{defaultContent}
29+
</AccordionItem>
30+
<AccordionItem key="3" aria-label="Accordion 3" title="Third Item">
31+
{defaultContent}
32+
</AccordionItem>
33+
</Accordion>
34+
</div>
35+
</div>
36+
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
37+
<h3>With Scroll on Open</h3>
38+
<div className="h-64 overflow-auto p-4 border rounded-lg">
39+
<div className="mb-32">
40+
<p className="mb-4 text-sm text-gray-600">
41+
Scroll down to see the accordion. When you expand items, they will automatically
42+
scroll into view.
43+
</p>
44+
</div>
45+
<Accordion scrollOnOpen>
46+
<AccordionItem key="1" aria-label="Accordion 1" title="Auto-Scroll Accordion Item">
47+
<div className="p-2">
48+
<p className="mb-4">{defaultContent}</p>
49+
<Button color="primary" size="sm">
50+
This will be scrolled into view
51+
</Button>
52+
</div>
53+
</AccordionItem>
54+
<AccordionItem key="2" aria-label="Accordion 2" title="Another Auto-Scroll Item">
55+
{defaultContent}
56+
</AccordionItem>
57+
<AccordionItem key="3" aria-label="Accordion 3" title="Third Auto-Scroll Item">
58+
{defaultContent}
59+
</AccordionItem>
60+
</Accordion>
61+
</div>
62+
</div>
63+
</div>
64+
);
65+
}

‎apps/docs/content/components/accordion/scroll-on-open.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import App from "./scroll-on-open.raw.jsx?raw";
2+
3+
const react = {
4+
"/App.jsx": App,
5+
};
6+
7+
export default {
8+
...react,
9+
};

‎apps/docs/content/components/accordion/transition-duration.raw.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {Accordion, AccordionItem} from "@heroui/react";
2+
3+
export default function App() {
4+
const defaultContent =
5+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
6+
7+
return (
8+
<div className="w-full grid grid-cols-12 gap-4">
9+
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
10+
<h3>Fast Transition (150ms)</h3>
11+
<Accordion transitionDuration={150}>
12+
<AccordionItem key="1" aria-label="Accordion 1" title="Fast Animation">
13+
{defaultContent}
14+
</AccordionItem>
15+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
16+
{defaultContent}
17+
</AccordionItem>
18+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
19+
{defaultContent}
20+
</AccordionItem>
21+
</Accordion>
22+
</div>
23+
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
24+
<h3>Default Transition (300ms)</h3>
25+
<Accordion>
26+
<AccordionItem key="1" aria-label="Accordion 1" title="Default Animation">
27+
{defaultContent}
28+
</AccordionItem>
29+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
30+
{defaultContent}
31+
</AccordionItem>
32+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
33+
{defaultContent}
34+
</AccordionItem>
35+
</Accordion>
36+
</div>
37+
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
38+
<h3>Slow Transition (800ms)</h3>
39+
<Accordion transitionDuration={800}>
40+
<AccordionItem key="1" aria-label="Accordion 1" title="Slow Animation">
41+
{defaultContent}
42+
</AccordionItem>
43+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
44+
{defaultContent}
45+
</AccordionItem>
46+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
47+
{defaultContent}
48+
</AccordionItem>
49+
</Accordion>
50+
</div>
51+
<div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
52+
<h3>Very Slow Transition (1200ms)</h3>
53+
<Accordion transitionDuration={1200}>
54+
<AccordionItem key="1" aria-label="Accordion 1" title="Very Slow Animation">
55+
{defaultContent}
56+
</AccordionItem>
57+
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
58+
{defaultContent}
59+
</AccordionItem>
60+
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
61+
{defaultContent}
62+
</AccordionItem>
63+
</Accordion>
64+
</div>
65+
</div>
66+
);
67+
}

‎apps/docs/content/components/accordion/transition-duration.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import App from "./transition-duration.raw.jsx?raw";
2+
3+
const react = {
4+
"/App.jsx": App,
5+
};
6+
7+
export default {
8+
...react,
9+
};

‎apps/docs/content/docs/components/accordion.mdx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,18 @@ Accordion offers a `motionProps` property to customize the `enter` / `exit` anim
122122

123123
> Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
124124
125+
### Transition Duration
126+
127+
Use `transitionDuration` property to customize the animations duration.
128+
129+
<CodeDemo title="Transition Duration" files={accordionContent.transitionDuration} />
130+
131+
### Scroll on Open
132+
133+
Use `scrollOnOpen` property to automatically scroll to the content when an accordion item is expanded.
134+
135+
<CodeDemo title="Scroll on Open" files={accordionContent.scrollOnOpen} />
136+
125137
### Controlled
126138

127139
Accordion is a controlled component, which means you need to control the `selectedKeys` property by yourself.
@@ -281,6 +293,18 @@ Here's an example of how to customize the accordion styles:
281293
description: "The motion properties of the Accordion.",
282294
default: "-"
283295
},
296+
{
297+
attribute: "transitionDuration",
298+
type: "number",
299+
description: "The duration of the animations in milliseconds.",
300+
default: 300
301+
},
302+
{
303+
attribute: "scrollOnOpen",
304+
type: "boolean",
305+
description: "Whether to automatically scroll to the content when an accordion item is expanded.",
306+
default: false
307+
},
284308
{
285309
attribute: "disabledKeys",
286310
type: "React.Key[]",

0 commit comments

Comments
 (0)