Настройки и размер
Эта страница описывает общие настройки компонентов — вид, статус, содержимое и цветовую схему — и общую для всех лестницу размеров.
Настройки: общий язык компонентов
Настройка — именованная ось, по которой меняется компонент: вид, статус, содержимое, размер, цветовая схема. Эта глава перечисляет канонические настройки и их значения.
Одна настройка — один вопрос
У компонента может быть несколько независимых настроек, и у каждой своё имя. Эти имена общие для обычных и Smart-компонентов: в обычной разметке они выражаются модификаторами, в Smart — атрибутами тега.
| Имя | Вопрос | Как выглядит в классе |
|---|---|---|
appearance |
Как элемент нарисован | sf-button--outline, sf-input--filled |
status |
О чём элемент сообщает | sf-alert--error, sf-badge--success |
kind |
Что элемент несёт или чем является | значения вроде icon, avatar, checkbox, file |
size |
Ступень общей лестницы размеров | sf-button--size-1, sf-input--size-2 |
scheme |
Какое смысловое семейство цвета взято | sf-button--primary, sf-button--on-surface |
Значения:
appearance— напримерdefault,tonal,outline,surface,linkу кнопки;bordered,filledу поля.status— всегда из одного словаря:neutral,info,success,warning,error.scheme—primary,secondary,on-surface.size— ступени лестницы (Размер: одна лестница для всех компонентов).
Настройки складываются: тег может быть флажком (kind), сообщать об успехе
(status) и быть нарисован призрачным (appearance).
Схема и статус — разные вещи
scheme выбирает семейство цвета, а не смысл. Любой вид существует в
каждой схеме: outline primary и outline on-surface — одна и та же форма
кнопки в разных цветах.
status говорит, о чём элемент. У кнопки статус окрашивает только
разрушительное действие — status="error"; другие статусы кнопку не
окрашивают. В модификаторе у кнопки одно место для цвета, поэтому, если задан
статус, он побеждает схему:
<!-- «Удалить»: вид outline, разрушительное действие -->
<button type="button" class="sf-button sf-button--outline sf-button--error sf-button--size-1">
<span class="sf-button-text-container">Удалить</span>
</button>
Канонические имена и совместимость
В разметке используйте только канонические имена настроек и значений из Одна настройка — один вопрос; как Framework обрабатывает прежние имена и выводит их из оборота — см. Жизненный цикл изменений.
Прежнее имя настройки или значения продолжает работать, пока у него идёт срок совместимости. Если на одном элементе заданы и прежнее, и каноническое имя, побеждает каноническое. Прежние имена есть у нескольких компонентов:
| Компонент | Настройка | Прежнее имя |
|---|---|---|
| Кнопка, кнопка-иконка | appearance |
type |
| Уведомление (Alert) | status, appearance |
type, variant |
| Всплывающее сообщение (Toast) | status |
type |
| Боковая панель (Drawer) | size |
значения small, medium, large — это ступени 1/2, 1, 2 |
Слова danger и critical — прежние имена статуса ошибки: они дают error,
но в новой разметке не используются. Полный список прежних имён
Smart-компонента — в таблице «Прежние имена» его страницы в справочнике
(/ru/smart-components/…); общий список всех компонентов — в файле
contracts/public-api-axes.json исходников Framework.
Как читать настройку. Читайте имя как вопрос. Нужно изменить вид — ищите
appearance; сообщить об ошибке — status; другое содержимое — kind. Если у
компонента пока есть только type, посмотрите его значения: по ним видно, на
какой вопрос он на самом деле отвечает.
Что настройкой не является
mode— как элемент ведёт себя (окно грузится сразу или по запросу; список выбирает или добавляет метки). Это не вид.- Нативный
typeу<input>и<button>принадлежит HTML, а не Framework. - Плотность (
spacing) и скругление (radius) — дополнительные настройки отдельных компонентов, а не общие для всех. Плотность меняет вертикальный отступ и через него высоту, не трогая ступень размера (см. Плотность:spacing): классыspacing-compact,spacing-comfortable,spacing-spacious; обычная плотность класса не требует. Плотность есть у кнопок, кнопок-иконок и тегов, а у Smart-компонентов — ещё у группы кнопок.
Смотрите также: Жизненный цикл изменений — совместимость и обновление; Плотность: spacing — плотность;
Размер: одна лестница для всех компонентов — размер; Компонент и его Smart-двойник — настройки Smart-двойника.
Размер: одна лестница для всех компонентов
Все компоненты берут размер из одной лестницы ступеней (сама лестница — см. Одна лестница размеров), поэтому компоненты одного размера стоят в одну линию без подгонки. Компонент использует только нужные ему ступени, но называет их теми же именами. Ступень фиксирует для всех компонентов сразу: высоту строки текста, высоту контрола, размер иконки и шаг от картинки до подписи.
Отсюда главное правило: поле и кнопка одного size — одна высота.
Поле размера 1 и кнопка размера 1 стоят в одну линию без подгонки.
У полей формы три размера: 1/2, 1 и 2. Кнопки и другие компоненты
используют больше ступеней — какие именно, сказано на странице компонента.
Геометрия компонента подчиняется стандарту геометрии (см. Геометрия: стандарт и проверка): части имеют размер строки своей ступени (если часть не помещается, неверен отступ, а не размер части); граница входит в высоту, поэтому кнопка с контуром не выше кнопки без него; связанные части — поле и его раскрытый список, подпись и контрол — начинают содержимое на одной линии (формулы — Части компонента — тоже со ступени и Отступ внутри контрола и общие оси). Эти правила не декларация: каждое держится браузерной пробой, которая измеряет результат на настольной и мобильной ширине с нулевым допуском.
Смотрите также: Одна лестница размеров — лестница размеров; Геометрия: стандарт и проверка — стандарт геометрии; Вид и размер полей — размер полей.