preview/pages/segmented-control.astro - dev - githubmirror/tabler

preview/pages/segmented-control.astro
110 строк4 KB
Paweł Kuna
Add quality gates: Prettier for Astro, astro check for shared, unused SCSS variable lint (#2749)
03 авг 2026, 01:47
03 авг 2026, 01:478962710
---
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>