tabler/preview/pages/segmented-control.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import NavSegmented from '@ui/NavSegmented.astro';
import Card from '@ui/Card.astro';
import CardBody from '@ui/CardBody.astro';
---

<DefaultLayout title="Segmented control" pageHeader="Segmented control" pageMenu="base.segmented-control">
	<div class="row row-cards">
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['1', '2', '3', '4']} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['👦', '👦🏿', '👦🏾', '👦🏽', '👦🏼', '👦🏻']} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} vertical />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented icons={['home', 'star', 'clock', 'ghost', 'bold', 'italic', 'underline']} vertical disabled={[3]} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} disabled={[4, 5]} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} vertical={true} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name="checkbox" />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<NavSegmented items={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} fullWidth={true} />
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<div class="space-y">
						<div><NavSegmented items={['Overview', 'Analytics', 'Reports', 'Notifications']} fullWidth={true} /></div>
						<div><NavSegmented items={['Account', 'Password']} fullWidth={true} /></div>
					</div>
				</CardBody>
			</Card>
		</div>
		<div class="col-md-6">
			<Card>
				<CardBody>
					<div class="space-y">
						<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="sm" /></div>
						<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} /></div>
						<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} disabled={[3, 5]} size="lg" /></div>

						<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="sm" /></div>
						<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} /></div>
						<div><NavSegmented items={['List', 'Kanban', 'Calendar', 'Files']} icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="lg" /></div>

						<div><NavSegmented icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="sm" /></div>
						<div><NavSegmented icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} /></div>
						<div><NavSegmented icons={['list', 'layout', 'calendar', 'files']} disabled={[3, 5]} size="lg" /></div>
					</div>
				</CardBody>
			</Card>
		</div>
	</div>
</DefaultLayout>