lomer-ui

Component

Accordion

Expand and collapse content with ease.

Installation

Get the component

npx lomer-ui get accordion
Source code

Usage

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Accordion from '$lib/components/base/accordion.svelte';
3 
</script>
4
5 
<div class="w-full">
6 
  <Accordion title="Basic Accordion">Content</Accordion>
7 
  <Accordion title="Requesting..." loading>Content</Accordion>
8 
  <Accordion title="Disabled" disabled>Content</Accordion>
9 
</div>
10

Single mode

Preview

Svelte Code

1 
<script lang="ts">
2 
  import Accordion from '$lib/components/base/accordion.svelte';
3 
  let group = $state('');
4 
</script>
5
6 
<Accordion title="Title 1" value="1" bind:group>Content</Accordion>
7 
<Accordion title="Title 2" value="2" bind:group>Content</Accordion>
8 
<Accordion title="Title 3" value="3" bind:group>Content</Accordion>
9