Accordion - Lithesome

Preview

Code

<script lang="ts">
	import { ChevronRightIcon } from '@lucide/svelte';
	import { slide } from 'svelte/transition';
	import { Accordion, AccordionButton, AccordionContent, AccordionHeading, AccordionItem } from 'lithesome';
	import { cn } from '$site/index.js';

	const items = [
		{
			title: 'What is Lithesome?',
			content:
				'Lithesome is a collection of unstyled Svelte 5 components that take care of all the functionality, leaving the visual design to you.',
			value: 'what-is-lithesome'
		},
		{ title: 'Is it good?', content: 'Well... Maybe... Idk...', value: 'is-it-good' },
		{ title: 'Is Svelte 5 good?', content: 'YES!', value: 'is-svelte5-good' }
	];
</script>

<Accordion class="w-full max-w-[700px]" value="what-is-lithesome">
	{#each items as { title, content, value }}
		<AccordionItem {value} class="border-b border-neutral-300 last:border-none dark:border-white/10">
			<AccordionHeading>
				<AccordionButton
					class="flex w-full cursor-pointer items-center justify-between gap-4 p-4 hover:text-black dark:hover:text-white"
				>
					{#snippet children({ active })}
						{title}
						<ChevronRightIcon class={cn('h-6 w-6 transition-transform', active ? 'rotate-90' : '')} />
					{/snippet}
				</AccordionButton>
			</AccordionHeading>
			<AccordionContent>
				{#snippet custom({ props, state })}
					{#if state.active}
						<div transition:slide={{ duration: 150 }} {...props} class="px-4 pb-4 text-sm">{content}</div>
					{/if}
				{/snippet}
			</AccordionContent>
		</AccordionItem>
	{/each}
</Accordion>

Basic Example

<script>
	import { Accordion, AccordionButton, AccordionContent, AccordionHeading, AccordionItem } from 'lithesome';

	const items = [
		{ title: 'First item', content: 'First item content', value: 'first' },
		{ title: 'Second item', content: 'Second item content', value: 'second' },
		{ title: 'Third item', content: 'Third item content', value: 'third' }
	];
</script>

<Accordion>
	{#each items as { title, content, value }}
		<AccordionItem {value}>
			<AccordionHeading>
				<AccordionButton>{title}</AccordionButton>
			</AccordionHeading>
			<AccordionContent>{content}</AccordionContent>
		</AccordionItem>
	{/each}
</Accordion>

API Reference

<Accordion />

Property	Type	Description
`value`	string \| string[]	The current value of the accordion.
`onChange`	(val: string \| string[]) => void	Fires whenever the `value` prop is changed.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`value`	string \| string[]	The value of the selected item(s).

<AccordionItem />

Property	Type	Description
`value`	string	The value of the item.
`disabled`	boolean	Disables the item, stop events from firing and skips over via keyboard navigation.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if the item is active.
`disabled`	boolean	True the item is disabled.

<AccordionHeading />

Property	Type	Description
`level`	1 \| 2 \| 3 \| 4 \| 5 \| 6
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if the item is active.

<AccordionButton />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if the item is active.
`disabled`	boolean	True the item is disabled.

<AccordionContent />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if the item is active.