Accordion
Imports
- Accordion: The main component to display a list of accordion items.
- AccordionItem: The item component to display a single accordion item.
- AccordionTrigger: The title component to display the title of the accordion item.
- AccordionContent: The content component to show the hidden content of the accordion.
Usage
import * as React from 'react'
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@openlite/ui'
function App() {
return (
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="example">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example2">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example3">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
</Accordion>
)
}Example
Expand Multiple Items
If the type is set to multiple, the accordion will allow several elements to expand at the same time.
import * as React from 'react'
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@openlite/ui'
function App() {
return (
<Accordion type="multiple" collapsible className="w-full">
<AccordionItem value="example">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
</Accordion>
)
}Rounded
import * as React from 'react'
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@openlite/ui'
function App() {
return (
<Accordion radius="sm" type="single" collapsible className="w-full">
<AccordionItem value="example">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example2">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example3">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
</Accordion>
)
}bordered
import * as React from 'react'
import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@openlite/ui'
function App() {
return (
<Accordion bordered="sm" type="single" collapsible className="w-full">
<AccordionItem value="example">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example2">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
<AccordionItem value="example3">
<AccordionTrigger>¿Usar Acordeón?</AccordionTrigger>
<AccordionContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AccordionContent>
</AccordionItem>
</Accordion>
)
}API
AccordionItem Props
| Props | Type | Description |
|---|---|---|
radius | 'none' | 'sm' | 'md' | 'lg' | The radius of the Accordion. |
bordered | 'none' | 'sm' | 'md' | 'lg' | The border of the Accordion. |