Icon Accordion

Examples

Add id 1,2,3,... to AccordionItem component.

Install svelte-heros.

npm i svelte-heros

Examples

<script>
  import { Accordion } from "flowbite-svelte";
  import { AccordionItem } from "flowbite-svelte";
  import { Archive, Beaker } from "svelte-heros";
</script>

<AccordionItem id="1">
  <h2 slot="header">
    <span class="flex">
      <span class="mr-2"><Archive /></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"><Beaker /></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 types page for type information.

Name Type Default
id string ''
slotClass string 'p-5 border border-t-0 border-gray-200 dark:border-gray-700'
isOpen boolean false
color boolean false
icons AccordionIconType { up: ChevronUp, down: ChevronDown }
iconSize number 24
iconClass string 'text-gray-500 sm:w-6 sm:h-6 dark:text-gray-300'
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'
colorClass string 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700'

Related components

Default Accordion

Icon Accordion

References

Flowbite Accordion