Special Elements
Split Screen
Split screen accordion with expanding partitions.
accordionsplitscreenlayout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | [{id: '1', label: '01', title: '...', description: '...'}, ...] | Array of accordion items with id, label, optional title, description, and content. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBorderColor | string | #e4e4e7 | Border color of the container (hex, rgb, or hsl). |
activeItemBgColor | string | #f4f4f5 | Background color of the active item (hex, rgb, or hsl). |
inactiveItemBgColor | string | #ffffff | Background color of inactive items (hex, rgb, or hsl). |
itemHoverBgColor | string | #fafafa | Background color of items on hover (hex, rgb, or hsl). |
itemBorderColor | string | #e4e4e7 | Border color between items (hex, rgb, or hsl). |
labelColor | string | #18181b | Color of item labels (hex, rgb, or hsl). |
titleColor | string | #18181b | Color of item titles (hex, rgb, or hsl). |
descriptionColor | string | #71717a | Color of item descriptions (hex, rgb, or hsl). |
defaultActive | number | null | null | Index of the initially active item (null for none). |
height | string | 20rem | Height of the accordion container (CSS value). |
borderRadius | string | 0.75rem | Border radius of the container (CSS value). |