Состояния
Состояние — то, как компонент показывает, что с ним происходит сейчас: наведение, нажатие, фокус, недоступность, загрузка, ошибка. Эта глава описывает, чем задаётся каждое состояние и как оно выглядит.
| Состояние | Чем задаётся | Как выглядит |
|---|---|---|
| Наведение | :hover |
Заливка или граница на ступень сильнее |
| Нажатие | :active, для переключателя — класс active |
Ещё на ступень сильнее |
| Фокус с клавиатуры | :focus-visible |
Кольцо фокуса |
| Недоступно | нативный disabled (для не-контролов — класс disabled) |
Приглушённые заливка, граница и текст; реакций нет |
| Только чтение | нативный readonly |
Фокус и выделение есть, реакций на наведение нет |
| Загрузка | класс loading, aria-busy="true" и disabled |
Вид недоступного и бегущие полосы |
| Ошибка | класс error на корне и контроле, aria-invalid="true" |
Граница и сообщение цвета ошибки |
Правила состояний:
- Сначала нативный признак. Недоступность — это атрибут
disabled, а не серый цвет. Класс только показывает состояние; не давать нажать должен браузер. Кнопка рисует вид недоступности по:disabled; атрибутaria-disabled="true"сообщает о недоступности вспомогательным технологиям, но вида не меняет, а классdisabledна кнопке снимает реакции на наведение и нажатие и рисует недоступность только у видаsurface(см. Доступность: что компонент даёт и что остаётся за автором). - Недоступный элемент не реагирует. Все правила наведения и нажатия написаны с условием «не недоступен», поэтому выключенная кнопка не подсвечивается.
- Загрузка — это недоступность. Кнопка в загрузке получает
disabled, чтобы второй клик ничего не запустил, и любой её вид на время работы выглядит как недоступная кнопка. Полосы не несут своего цвета: это полупрозрачная ступень нейтральной шкалы, читаемая в обеих темах. Снимает загрузку приложение: компонент не управляет запросом. - Ошибка — это сообщение, а не цвет. Красного контура недостаточно; рядом должен быть текст, который объясняет, как исправить значение (см. Поля формы).
- Кольцо фокуса — одно на компонент. Оно рисуется вокруг той части,
которую видит человек: у поля — вокруг
sf-input-field, а не вокруг голого<input>внутри. Кольцо — этоoutlineиз токенов--sf-focus--width,--sf-focus--style,--sf-focus--color,--sf-focus--offset, поэтому оно не стирает тень приподнятого элемента. На кнопке с заливкой добавляется внутренняя линия цвета подписи: без неё кольцо в тёмной теме сливается с заливкой. - Состояния учитывают настройки системы. В режиме принудительных цветов кольцо рисуется системным цветом; при запросе уменьшить движение переходы и бегущие полосы отключаются.
Как Smart-компонент объявляет свои состояния и состояния данных (загрузка, пусто, ошибка) — см. Состояния.
Смотрите также: Фокус — видимый фокус; Ошибка — ошибка в поле; Состояния — состояния Smart-компонентов.