Collapsible

Toggle content sections.

<script lang="ts">
	import { Collapsible, CollapsibleButton, CollapsibleContent } from 'lithesome';
	import { ChevronsUpDown } from 'lucide-svelte';
	import { slide } from 'svelte/transition';

	let items = ['Hamburger', 'Cheeseburger', 'Big Mac', 'Whopper'];
</script>

<Collapsible class="w-64">
	<div class="flex items-center justify-between gap-4">
		<span>Super Secret Items</span>
		<CollapsibleButton class="flex size-7 rounded-md bg-black text-white dark:bg-white dark:text-black">
			<ChevronsUpDown class="m-auto size-4" />
		</CollapsibleButton>
	</div>
	<CollapsibleContent class="mt-3 flex flex-col gap-1" transition={[slide]}>
		{#each items as item}
			<div class="rounded-md bg-black/5 px-3 py-2 text-sm dark:bg-white/5">
				<p>{item}</p>
			</div>
		{/each}
	</CollapsibleContent>
</Collapsible>

Prop	Type	Description
`visible` *	`boolean` `Default: false`	Whether or not the content is visible.
`disabled`	`boolean` `Default: false`	Disables the entire component tree.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`

Data attribute	Value	Description
`data-collapsible`	`''`	The base data attribute, can be used for styling.
`data-disabled`	`boolean`	Disables the entire component tree.
`data-state`		The current state of the content.

Child prop	Type	Description
`visible`	`boolean`

Data attribute	Value	Description
`data-collapsiblebutton`	`''`	The base data attribute, can be used for styling.
`data-disabled`	`boolean`

Child prop	Type	Description
`visible`	`boolean`

Data attribute	Value	Description
`data-collapsiblecontent`	`''`	The base data attribute, can be used for styling.

Basic Example

<script>
	import { Collapsible, CollapsibleButton, CollapsibleContent } from 'lithesome';
</script>

<Collapsible>
	<CollapsibleButton>Toggle Content</<CollapsibleButton>
	<CollapsibleContent>
		Content of the things
	</CollapsibleContent>
</Collapsible>