mirror of
https://github.com/tabler/tabler.git
synced 2026-10-27 02:06:08 +04:00
154 lines
7.2 KiB
Plaintext
154 lines
7.2 KiB
Plaintext
---
|
|
title: Segmented control
|
|
summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
|
|
description: A set of mutually exclusive options displayed as connected buttons.
|
|
source: core/scss/ui/_segmented.scss
|
|
classnames:
|
|
component:
|
|
- class: nav-segmented
|
|
desc: Applied together with nav, turns it into a segmented control
|
|
direction:
|
|
- class: nav-segmented-vertical
|
|
desc: Stacks the segments in a column
|
|
size:
|
|
- class: nav-sm
|
|
desc: Small size
|
|
- class: nav-lg
|
|
desc: Large size
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
|
|
|
|
<Example centered>
|
|
<nav class="nav nav-segmented" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"> First </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Second </button>
|
|
<button class="nav-link" disabled role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Disabled </button>
|
|
</nav>
|
|
</Example>
|
|
|
|
## Full width
|
|
|
|
To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
|
|
|
|
```html
|
|
<nav class="nav nav-segmented w-100" role="tablist">...</nav>
|
|
```
|
|
|
|
The results can be seen in the example below.
|
|
|
|
<Example>
|
|
<nav class="nav nav-segmented w-100" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"> Daily </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Weekly </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Monthly </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Quarterly </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Yearly </button>
|
|
</nav>
|
|
</Example>
|
|
|
|
## With emojis
|
|
|
|
You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
|
|
|
|
<Example centered>
|
|
<nav class="nav nav-segmented" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"> 👦 </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏿 </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏾 </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏽 </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏼 </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏻 </button>
|
|
</nav>
|
|
</Example>
|
|
|
|
## With icons
|
|
|
|
You can also use [icons](/ui/components/icon) in the segmented control. To do this, add the icon inside the `button` element.
|
|
|
|
|
|
<Example centered>
|
|
<nav class="nav nav-segmented" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
|
<Icon name="list" /> List
|
|
</button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
|
<Icon name="layout" /> Kanban
|
|
</button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
|
<Icon name="calendar" /> Calendar
|
|
</button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
|
<Icon name="files" /> Files
|
|
</button>
|
|
</nav>
|
|
</Example>
|
|
|
|
## Vertical direction
|
|
|
|
To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
|
|
|
|
```html
|
|
<nav class="nav nav-segmented-vertical" role="tablist">...</nav>
|
|
```
|
|
|
|
The results can be seen in the example below.
|
|
|
|
<Example centered>
|
|
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
|
|
<Icon name="list" /> List
|
|
</button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
|
<Icon name="layout" /> Kanban
|
|
</button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
|
<Icon name="calendar" /> Calendar
|
|
</button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
|
|
<Icon name="files" /> Files
|
|
</button>
|
|
</nav>
|
|
</Example>
|
|
|
|
## Sizes
|
|
|
|
You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
|
|
|
|
```html
|
|
<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
|
|
```
|
|
|
|
The results can be seen in the examples below.
|
|
|
|
<Example centered vertical>
|
|
<nav class="nav nav-segmented nav-sm" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"> List </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Kanban </button>
|
|
<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1"> Calendar </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Files </button>
|
|
</nav>
|
|
<nav class="nav nav-segmented nav-lg" role="tablist">
|
|
<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page"> List </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Kanban </button>
|
|
<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1"> Calendar </button>
|
|
<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Files </button>
|
|
</nav>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- A segmented control that switches panels is a tab list: put `role="tablist"` on the `nav`, `role="tab"` on each button, and link them to the panels with `aria-controls`.
|
|
- A segmented control that picks a value is a radio group instead. Use `input type="radio"` with a shared name inside a `fieldset` with a `legend`, so the arrow keys work and the group has a name.
|
|
- Do not mix the two. Buttons with `aria-pressed` in a row read as separate toggles, which is not what a segmented control looks like.
|
|
- Every segment needs a text label. An emoji or an icon alone leaves the option unnamed - add an `aria-label` if the design has no room for words.
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize the segmented control. The default values are:
|
|
|
|
<CodeDocs name="segmented-nav-variables" file="core/scss/_variables.scss" />
|