Одна лестница размеров
Лестница размеров — общий для всех компонентов ряд ступеней 1/3…3. Она
даёт одинаковую высоту и одинаковые размеры частей у кнопки, поля, тега и
строки списка одной ступени, поэтому они стоят в одну линию без подгонки.
Поля форм берут только три ступени: 1/2, 1 и 2. Размер 1/3 поле
рисует как 1/2, а 3 — как 2, с предупреждением в консоли. Кнопку рядом
с полем ставьте на ту же ступень из этих трёх (см. Поля форм — три размера).
Правило
Размер компонента — это ступень одной лестницы: 1/3, 1/2, 1, 2, 3.
Настройка size у кнопки, поля, выпадающего списка, тега и строки списка
отвечает на один и тот же вопрос и даёт одну и ту же высоту строки (у полей —
на ступенях 1/2, 1 и 2). Поэтому
поле размера 1 и кнопка размера 1 стоят в одну линию без подгонки, а строка
списка размера 1 имеет ту же высоту, что контрол размера 1.
- Компонент не заводит свою шкалу размеров.
Как получается высота
Высота контрола складывается из высоты строки и двух вертикальных отступов:
высота контрола = высота строки + 2 × вертикальный отступ
Рамка считается внутри этой высоты. Контрол ступени S берёт высоту строки
текста той же ступени: у кнопки размера 1 строка такая же, как у текста 1.
| Ступень | Строка (моб. / наст.) | Высота контрола (моб. / наст.) | Токен |
|---|---|---|---|
1/3 |
16 / 16 | 24 / 24 | --sf-ui-1/3--control-height |
1/2 |
16 / 20 | 28 / 32 | --sf-ui-1/2--control-height |
1 |
20 / 24 | 36 / 40 | --sf-ui-1--control-height |
2 |
24 / 28 | 44 / 48 | --sf-ui-2--control-height |
3 |
24 / 36 | 52 / 56 | --sf-ui-3--control-height |
Значения даны для обычной плотности (Плотность: spacing). Контракт допускает расхождение
высоты между разными контролами одной ступени и плотности не больше 0.5
CSS-пикселя; браузерные замеры держат нулевой допуск (Геометрия: стандарт и проверка).
Плотность: spacing
Размер выбирает величину содержимого. Плотность выбирает, сколько воздуха вокруг него по вертикали. Это отдельная настройка с четырьмя значениями:
spacing |
Высота контрола 1, наст. |
|---|---|
compact |
32 px |
normal (по умолчанию) |
40 px |
comfortable |
48 px |
spacious |
56 px |
Плотность меняет вертикальный отступ и через него итоговую высоту.
- Одинаковые размер и плотность дают одинаковую высоту: правило одной линии сохраняется.
- Плотность не заменяет размер. Если нужен элемент крупнее, берите размер
больше, а не
spacious.
Smart-компоненты принимают атрибут spacing. Его поддерживают кнопки,
кнопки-иконки, группа кнопок и теги; набор для каждого компонента указан на его
странице. Компоненты на классах (кнопки, кнопки-иконки, теги) принимают классы
spacing-compact, spacing-comfortable и spacing-spacious (см. Что настройкой не является).
Прежние имена атрибута и классов продолжают работать как совместимые (см. Жизненный цикл изменений и совместимость).
Части компонента — тоже со ступени
Лестница фиксирует не только высоту, но и размер каждой части. На ступени S:
| Часть | Размер |
|---|---|
Строка текста L |
--sf-text--height-S |
Высота контрола H |
--sf-ui-S--control-height |
| Иконка, аватар, цветовая точка, флажок, стрелка, галочка | L |
| Флаг (прямоугольная картинка) | 3/4 · L — оптический размер глифа иконки |
| Шаг от картинки до подписи | --sf-ui-S--text-space-x |
| Горизонтальный внутренний отступ | --sf-ui-S--space-x |
На ступени 1 на настольном экране это строка 24 px и картинки 24 px в
контроле высотой 40 px.
- Нельзя уменьшать часть, чтобы она влезла. Если картинка по лестнице не помещается, ошибся отступ, а не картинка. Иначе та же иконка в одном компоненте окажется на 2 px меньше, чем в соседнем.
Поля форм — три размера
Поля форм (поле ввода, многострочное поле, выпадающий список, количество, код
подтверждения, телефон с кодом страны, загрузка файлов, поле выбора даты)
поддерживают три ступени: 1/2 (32 px), 1 (40 px) и 2 (48 px) на настольном
экране. В размере 1/3 в поле не помещаются теги, аватары и крестик удаления,
а цели нажатия получаются меньше 24 px.
Если полю передан размер 1/3, оно рисуется как 1/2; размер 3 — как 2.
Компонент один раз предупреждает об этом в консоли. Кнопки, кнопки-иконки,
теги, бейджи и строки списка поддерживают полную лестницу, потому что
используются и вне полей.
Смотрите также
- Отступ внутри контрола и общие оси — отступ внутри контрола и общие оси.
- Геометрия: стандарт и проверка — стандарт геометрии и замеры.
- Что настройкой не является — классы плотности.
- Размер: одна лестница для всех компонентов — как компоненты пользуются лестницей.
- Значения вертикальных размеров — высоты контролов и строк всех ступеней и плотностей.