Segment Control

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconLeft from 'lucide-svelte/icons/align-left';
	import IconCenter from 'lucide-svelte/icons/align-center';
	import IconRight from 'lucide-svelte/icons/align-right';
	import IconJustify from 'lucide-svelte/icons/align-justify';

	let align = $state('left');
</script>

<Segment name="align" bind:value={align}>
	<Segment.Item value="left">
		<IconLeft />
	</Segment.Item>
	<Segment.Item value="center">
		<IconCenter />
	</Segment.Item>
	<Segment.Item value="right">
		<IconRight />
	</Segment.Item>
	<Segment.Item value="justify">
		<IconJustify />
	</Segment.Item>
</Segment>

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';

	let size = $state('sm');
</script>

<Segment name="size" bind:value={size} disabled>
	<Segment.Item value="sm">sm</Segment.Item>
	<Segment.Item value="md">md</Segment.Item>
	<Segment.Item value="lg">lg</Segment.Item>
</Segment>

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';

	let size = $state('sm');
</script>

<Segment name="size" bind:value={size}>
	<Segment.Item value="sm">sm</Segment.Item>
	<Segment.Item value="md" disabled>md</Segment.Item>
	<Segment.Item value="lg">lg</Segment.Item>
</Segment>

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';

	let size = $state('sm');
</script>

<Segment name="size" bind:value={size} readOnly>
	<Segment.Item value="sm">sm</Segment.Item>
	<Segment.Item value="md">md</Segment.Item>
	<Segment.Item value="lg">lg</Segment.Item>
</Segment>

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';

	let size = $state('sm');
</script>

<Segment name="size" bind:value={size} orientation="vertical">
	<Segment.Item value="sm">Small</Segment.Item>
	<Segment.Item value="md">Medium</Segment.Item>
	<Segment.Item value="lg">Large</Segment.Item>
</Segment>

<nav class="btn-group preset-outlined-surface-200-800 flex-col p-2 md:flex-row">
	<button type="button" class="btn preset-filled">January</button>
	<button type="button" class="btn hover:preset-tonal">February</button>
	<button type="button" class="btn hover:preset-tonal">March</button>
</nav>