Сегментированный переключатель
Сегментированный переключатель меняет вид одного и того же содержимого, например список или сетку. Один сегмент всегда включён, и смена применяется сразу.
<tk-segmented-control label="View" value="list"> <tk-segment value="list">List</tk-segment> <tk-segment value="grid">Grid</tk-segment> <tk-segment value="map">Map</tk-segment> </tk-segmented-control>
Анатомия
| Часть | Что это |
|---|---|
tk-segmented-control |
дорожка: утопленная подложка высотой 32px; одна остановка Tab |
tk-segment |
один вариант; все сегменты одной ширины |
| плашка выбранного | приподнятая плашка с тенью под выбранным сегментом |
Форма
shape="round" полностью скругляет дорожку и плашку.
<tk-segmented-control label="Period" value="week" shape="round"> <tk-segment value="day">Day</tk-segment> <tk-segment value="week">Week</tk-segment> <tk-segment value="month">Month</tk-segment> </tk-segmented-control>
Состояния
<tk-segmented-control label="Messages" value="all"> <tk-segment value="all">All</tk-segment> <tk-segment value="unread">Unread</tk-segment> <tk-segment value="flagged" disabled>Flagged</tk-segment> </tk-segmented-control> <tk-segmented-control label="Layout" value="grid" disabled> <tk-segment value="list">List</tk-segment> <tk-segment value="grid">Grid</tk-segment> </tk-segmented-control>
При наведении подпись сегмента темнеет, при нажатии появляется подложка, при фокусе с клавиатуры — рамка.
disabledу сегмента: он приглушён, не нажимается, и стрелки его пропускают.disabledу переключателя: он целиком выпадает из порядка Tab. Плашка выбранного остаётся, и текущий вид по-прежнему понятен.
Когда использовать
- Переключатель меняет то, как показано одно содержимое: список или сетка; день, неделя или месяц; все или непрочитанные.
- Чтобы переходить между разделами с разным содержимым, берите
Tab bar . - Для значения, которое отправляет форма, берите
Radio group . Сегментированный переключатель в форму не входит. - Если вариантов больше 5 или подписи длинные, берите
Select . - Если включить можно несколько вариантов, берите
Toggle button group .
Текст
- От 2 до 5 сегментов, в каждом одно короткое слово с заглавной буквы.
- Называйте вид, а не действие: «Сетка», а не «Показать сеткой».
- Задайте переключателю
label, который говорит, что он меняет: «Вид», «Период».
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Менять вид одного содержимого | Переходить между разделами: для этого tab bar |
| Включён ровно один сегмент | Несколько включённых: для этого toggle button group |
| 2–5 сегментов по одному слову | 6 вариантов или длинные подписи: для этого select |
| Применять смену сразу | Ставить в форму: для этого radio group |
Слушать change на переключателе |
Вешать обработчик клика на каждый сегмент |
Связанные
Tab bar : переходы между разделами.Toggle button group : такой же ряд, но включить можно несколько вариантов.Radio group : один выбор, который отправляет форма.Switch : одна настройка, вкл или выкл.
API
tk-segmented-control
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
value |
string | '' |
value выбранного сегмента; обновляется, когда сегмент выбирают |
label |
string | — | доступное имя группы; обязателен |
disabled |
boolean | false |
отключает все сегменты |
shape |
rect | round |
rect |
скруглённые углы или полностью скруглённые края |
| Слот | Содержимое |
|---|---|
| по умолчанию | от 2 до 5 элементов tk-segment |
tk-segment
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
value |
string | '' |
идентификатор сегмента; обязателен |
disabled |
boolean | false |
приглушён, не нажимается, стрелки его пропускают |
| Слот | Содержимое |
|---|---|
| по умолчанию | подпись, одно короткое слово |
События
change приходит от tk-segmented-control, когда выбирают другой сегмент. Новое значение
читайте из value. Событие не приходит, если value задан в коде или сегмент уже
выбран.
Токены
| Часть | Токены |
|---|---|
| дорожка | surface/sunken, radius-8, отступ space-2 |
| сегмент | text/secondary, Label Medium (14/20), space-12 по бокам |
| сегмент, наведение | text/default |
| сегмент, нажатие | state/press |
| плашка выбранного | surface/raised + shadow-1 + text/default, radius-6 |
| отключён | text/disabled |
| рамка фокуса | border/accent/focus |
С shape="round" дорожка и плашка берут radius-full. Значения по темам:
Доступность
Встроено:
- Переключатель — группа радиокнопок с именем из
label; каждый сегмент — радиокнопка с отметкой выбора. - Одна остановка Tab: фокус попадает на выбранный сегмент.
- Стрелки двигают фокус и выбор вместе, как у обычных радиокнопок.
- Выбранный сегмент отмечен приподнятой плашкой, а не только цветом.
На вашей стороне:
- Задайте
labelпереключателю иvalueкаждому сегменту. - Меняйте содержимое сразу, как пришло
change. Если загрузка занимает время, покажитеSpinner в содержимом, а переключатель оставьте рабочим.
| Клавиша | Действие |
|---|---|
Tab |
переводит фокус на выбранный сегмент, затем из переключателя |
Right / Down |
выбирает следующий сегмент; с последнего переходит на первый |
Left / Up |
выбирает предыдущий сегмент; с первого переходит на последний |
Space |
выбирает сегмент в фокусе |