mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
110 lines
3.5 KiB
Plaintext
110 lines
3.5 KiB
Plaintext
---
|
|
// Port of preview/pages/segmented-control.html (layout: default)
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import NavSegmented from '@shared/components/ui/NavSegmented.astro';
|
|
---
|
|
|
|
<DefaultLayout title="Segmented control" pageHeader="Segmented control" pageMenu="base.segmented-control">
|
|
<div class="row row-cards">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="1,2,3,4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented icons="home,star,clock,ghost,bold,italic,underline" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" vertical />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented icons="home,star,clock,ghost,bold,italic,underline" vertical disabled="3" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="Daily,Weekly,Monthly,Quarterly,Yearly" disabled="4,5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="Daily,Weekly,Monthly,Quarterly,Yearly" vertical={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="Daily,Weekly,Monthly,Quarterly,Yearly" name="checkbox" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<NavSegmented items="Daily,Weekly,Monthly,Quarterly,Yearly" fullWidth={true} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="space-y">
|
|
<div><NavSegmented items="Overview,Analytics,Reports,Notifications" fullWidth={true} /></div>
|
|
<div><NavSegmented items="Account,Password" fullWidth={true} /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|