Icon Accordion
Examples
Add id 1,2,3,... to AccordionItem component.
Install svelte-heros.
npm i svelte-herosExamples
<script>
import { Accordion } from "flowbite-svelte";
import { AccordionItem } from "flowbite-svelte";
import { ArchiveOutline, BeakerOutline } from "svelte-heros";
</script>
<AccordionItem id="1">
<h2 slot="header">
<span class="flex">
<span class="mr-2"><ArchiveOutline /></span>
My Header 1
</span>
</h2>
<div slot="body">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipisicing ...
</p>
...
</div>
</AccordionItem>
<AccordionItem id="2">
<h2 slot="header"><span class="flex ">
<span class="mr-2"><BeakerOutline /></span>
My Header 2
</span>
</h2>
<div slot="body">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet, consectetur adipisicing ...
</p>
...
</div>
</AccordionItem>Props
The component has the following props, type, and default values. See type-list page for type information.
| Name | Type | Default |
|---|---|---|
| id | string | '' |
| btnClass | string | 'flex items-center focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 justify-between p-5 w-full font-medium border border-gray-200 dark:border-gray-700 text-left text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800' |
| slotClass | string | 'p-5 border border-t-0 border-gray-200 dark:border-gray-700' |
| isOpen = fals | isOpen | false |
| color | boolean | false |
| flush | boolean | false |
| icons | AccordionIconType | { |
| iconSize | number | 24 |
| iconClass | string | 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300' |