Components
Accordion
A stacked set of interactive items that you can click to show more information. Each item can be either collapsed or expanded to reveal the complete content.
Basic usage
First, import the component.
import {Accordion} from '@pleo-io/telescope'
Then use it, like so:
API reference
Accordion
| Prop | Type | Default |
|---|---|---|
type | enum | 'multiple' |
Information:
Also supports
Radix Accordion Root >
value, defaultValue, onValueChange, collapsible and disabled props.
Accordion.Item
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | |
disabled | boolean | false |
value* | string |
Information:
The Accordion.Item component must only contain an Accordion.Header followed by an
Accordion.Content, optionally follwed by an Accordion.Footer.
Accordion.Header
| Prop | Type | Default |
|---|---|---|
badgeProps | AccordionBadgeProps | |
count | number | |
description | string | |
heading* | string | |
headingLevel* | enum | |
Icon | React.FC<{ size?: any; color?: any; }> |
Information:
The heading should be as brief as possible while still being clear and descriptive. Each heading
needs a level (h2-h6) that is appropriate for the information architecture of the page.
Accordion.Content
This component doesn't accept any custom props.
Accordion.Footer
This component doesn't accept any custom props.