svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

Accordion

Default Accordion

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
</script>

<Accordion>
  <AccordionItem>
    {#snippet header()}
      Header 1-1
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      Header 1-2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Open

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
</script>

<Accordion>
  <AccordionItem open>
    {#snippet header()}
      Header 1-1
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      Header 1-2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Color

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
</script>

<Accordion activeClass="bg-blue-100 dark:bg-gray-800 text-blue-600 dark:text-white focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-800" inactiveClass="text-gray-500 dark:text-gray-400 hover:bg-blue-100 dark:hover:bg-gray-800">
  <AccordionItem class="">
    {#snippet header()}
      Header 2-1
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      Header 2-2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Flush

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
</script>

<Accordion flush>
  <AccordionItem>
    {#snippet header()}
      Header 2-1
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      Header 2-2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Arrow style

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
  import { ChevronDoubleUpOutline, ChevronDoubleDownOutline } from "flowbite-svelte-icons";
</script>

<Accordion>
  <AccordionItem>
    {#snippet header()}
      Header 2-1
    {/snippet}
    {#snippet arrowup()}
      <ChevronDoubleUpOutline class="-me-0.5 h-6 w-6" />
    {/snippet}
    {#snippet arrowdown()}
      <ChevronDoubleDownOutline class="-me-0.5 h-6 w-6" />
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      Header 2-2
    {/snippet}
    {#snippet arrowup()}
      <ChevronDoubleUpOutline class="-me-0.5 h-6 w-6" />
    {/snippet}
    {#snippet arrowdown()}
      <ChevronDoubleDownOutline class="-me-0.5 h-6 w-6" />
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Icon (animated icons)

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
  import { CartFlowbite, CogFlowbite } from "svelte-animated-icons";
</script>

<Accordion>
  <AccordionItem>
    {#snippet header()}
      <span class="flex gap-2 text-base">
        <CartFlowbite />
        <span>My Header 1</span>
      </span>
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      <span class="flex gap-2 text-base">
        <CogFlowbite />
        <span>My Header 2</span>
      </span>
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sintexplicabo...</p>
  </AccordionItem>
</Accordion>

Multiple mode

<script lang="ts">
  import { Accordion, AccordionItem, Button } from 'svelte-5-ui-lib';
  let item0 = $state(false);
  let item1 = $state(false);
  let item2 = $state(false);
  const open_all = () => {
    item0 = true;
    item1 = true;
    item2 = true;
  };
  const close_all = () => {
    item0 = false;
    item1 = false;
    item2 = false;
  };
</script>

<Button onclick={open_all} class="bg-primary-800">Open all</Button>
<Button onclick={close_all} class="bg-primary-800">Close all</Button>
<Accordion class="mt-4">
  <AccordionItem bind:open={item0}>
    {#snippet header()}
      My Header 1
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet ...</p>
  </AccordionItem>
  <AccordionItem bind:open={item1}>
    {#snippet header()}
      My Header 2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet...</p>
  </AccordionItem>
  <AccordionItem bind:open={item2}>
    {#snippet header()}
      My Header 3
    {/snippet}
    <p>Something more</p>
  </AccordionItem>
</Accordion>

Transitions

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
  import { fade, fly } from "svelte/transition";
  import { quintOut } from "svelte/easing";
</script>

<Accordion>
  <AccordionItem params={{ duration: 2000 }}>
    {#snippet header()}
      slide, duration: 2000
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem transition={fly} params={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}>
    {#snippet header()}
      Fly, delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem transition={fade} params={{ duration: 1000 }}>
    {#snippet header()}
      Fade, duration: 1000
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Nesting

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
  let nestingOpenStatus: boolean = $state(true);
</script>

<Accordion>
  <AccordionItem bind:open={nestingOpenStatus}>
    {#snippet header()}
      My Header 1
    {/snippet}
    <Accordion>
      <AccordionItem>
        {#snippet header()}
          My Header 1
        {/snippet}
        <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet ...</p>
      </AccordionItem>
      <AccordionItem>
        {#snippet header()}
          My Header 2
        {/snippet}
        <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet...</p>
        <ul class="list-disc ps-5 text-gray-500 dark:text-gray-400">
          <li>
            <a href="/" target="_blank" rel="noreferrer" class="text-blue-600 hover:underline dark:text-blue-500">Lorem ipsum</a>
          </li>
          <li>
            <a href="https://tailwindui.com/" rel="noreferrer" target="_blank" class="text-blue-600 hover:underline dark:text-blue-500">Tailwind UI</a>
          </li>
        </ul>
      </AccordionItem>
    </Accordion>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      My Header 2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur ...</p>
  </AccordionItem>
</Accordion>

Open multiple

<script lang="ts">
  import { Accordion, AccordionItem } from 'svelte-5-ui-lib';
</script>

<Accordion isSingle={false}>
  <AccordionItem>
    {#snippet header()}
      Header 1-1
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
  <AccordionItem>
    {#snippet header()}
      Header 1-2
    {/snippet}
    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
  </AccordionItem>
</Accordion>

Component data

codewithshin.com
  • Repo
  • About