Плавающая кнопка
Плавающая кнопка (FAB) — круглая кнопка с иконкой для одного главного и частого действия экрана: создать запись, написать сообщение. Для обычного действия без подписи берите кнопку с иконкой.
Пример
Разметка
Минимальную разметку показывает пример выше: нативный
<button type="button"> с классами блока sf-fab, вида и схемы
(sf-fab--default sf-fab--primary) и размера (sf-fab--size-1), внутри —
иконка <i class="sf-icon" aria-hidden="true">.
- Кнопке без подписи нужен
aria-labelс названием действия. - Положение поверх содержимого (
fixed, отступы от края) задают утилиты компоновки: классsf-fabотвечает только за вид кнопки. - На экране держите не больше одной плавающей кнопки.
Варианты
Вид и схема
Вид и схема задаются парой классов, и сочетаний четыре:
default primary — главное действие, акцентная заливка;
default on-surface — контрастная тёмная кнопка (в тёмной теме — светлая);
tonal secondary и tonal on-surface — спокойная заливка, когда кнопка не
должна спорить с содержимым. Других сочетаний в CSS нет.
sf-fab--default sf-fab--primary
sf-fab--default sf-fab--on-surface
sf-fab--tonal sf-fab--secondary
sf-fab--tonal sf-fab--on-surface
Размер
Размеры 1, 2 и 3 согласованно меняют внутренние отступы и иконку.
Размер 1 подходит большинству экранов, 2 и 3 — крупным сенсорным
интерфейсам.
sf-fab--size-1
sf-fab--size-2
sf-fab--size-3
Состояния
Наведение и нажатие кнопка показывает сама.
Нажата
Класс active оставляет кнопке тон нажатия. Для кнопки-переключателя
сообщайте состояние атрибутом aria-pressed: класс меняет только вид.
обычная
active
active
Недоступна
Нативный disabled даёт любому виду серую заливку: кнопка не получает фокус
и не срабатывает. Класс disabled только отключает эффекты наведения и
нажатия.
sf-fab--default sf-fab--primary
sf-fab--tonal sf-fab--on-surface
Фокус
При переходе клавишей Tab кнопка получает кольцо фокуса по :focus-visible;
щелчок мышью кольца не показывает. В примере фокус показан классом
focus-visible, который CSS читает наравне с :focus-visible.
sf-fab--default sf-fab--primary
sf-fab--tonal sf-fab--on-surface
Доступность
- Доступное имя через
aria-labelназывает действие: «Создать задачу», а не «Плюс». - Иконка декоративная:
aria-hidden="true". - Кнопка, закреплённая поверх содержимого, не должна закрывать текст и поля: оставьте под неё отступ у края страницы.
- В порядке Tab кнопка стоит там, где она в разметке; ставьте её рядом с содержимым, к которому относится действие.
JavaScript
Разметка sf-fab работает без скрипта. Компонент регистрирует класс Fab
для одной готовой задачи — кнопки «наверх»: он создаёт закреплённую в
нижнем конечном углу кнопку, показывает её после прокрутки страницы больше
чем на 200 пикселей и по нажатию возвращает страницу к началу (без анимации
при системной настройке уменьшения движения). Параметры: icon (по
умолчанию chevron_left, повёрнутая стрелка), size, type, scheme;
attrs переносятся на кнопку. Задайте кнопке aria-label, например «Наверх».
Событий компонент не отправляет.
SF.Loader появляется к событию sf-loader-init на window;
SF.Loader.ready('Fab', callback) передаёт класс, когда он зарегистрирован.
const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));
whenLoader(() => SF.Loader.ready('Fab', (Fab) => {
const fab = new Fab({attrs: {'aria-label': 'Наверх'}});
document.body.append(fab.render());
}));
Классы
| Что | Классы |
|---|---|
| Блок | sf-fab |
| Модификаторы | sf-fab--default, sf-fab--on-surface, sf-fab--primary, sf-fab--secondary, sf-fab--tonal |
| Размеры | sf-fab--size-1, sf-fab--size-2, sf-fab--size-3 |
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-fab); переменную без него задают только модификаторы.
| Переменная | По умолчанию | Задаёт |
|---|---|---|
--sf-fab--background-color |
не задана; задают модификаторы, например .sf-fab.sf-fab--default.sf-fab--primary: var(--sf-primary) |
background-color |
--sf-fab--box-shadow |
не задана; задают модификаторы, например .sf-fab:not(:disabled):not(.disabled).focus-visible: none |
box-shadow |
--sf-fab--focus-ink |
не задана; задают модификаторы, например .sf-fab.sf-fab--default.sf-fab--primary: var(--sf-on-primary) |
--sf-fab--focus-inset |
--sf-fab--focus-inset |
не задана; задают модификаторы, например .sf-fab:not(:disabled):not(.disabled).focus-visible: inset 0 0 0 var(--sf-focus--offset) var(--sf-fab--focus-ink, transparent) |
box-shadow |
--sf-fab--padding-bottom |
не задана; задают модификаторы, например .sf-fab--size-1: var(--sf-ui-1--space-y-tightness-default) |
padding-bottom |
--sf-fab--padding-inline-end |
не задана; задают модификаторы, например .sf-fab--size-1: var(--sf-ui-1--space-y-tightness-default) |
padding-inline-end |
--sf-fab--padding-inline-start |
не задана; задают модификаторы, например .sf-fab--size-1: var(--sf-ui-1--space-y-tightness-default) |
padding-inline-start |
--sf-fab--padding-top |
не задана; задают модификаторы, например .sf-fab--size-1: var(--sf-ui-1--space-y-tightness-default) |
padding-top |