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