Минимальный кирпич таблицы. Дизайн-система поставляет ячейку — высоту строки, инсеты, границы, типографику и слоты под уже существующие компоненты. Сетку, сортировку, виртуализацию и перемещение по строкам пишет приложение: ячейка не знает ни числа колонок, ни соседей.
Рынок |
Объём сделок, млн ₽ |
|---|---|
Основной рынок |
400 000,00 |
Рынок |
Объём сделок, млн ₽ |
|---|---|
Основной рынок Т+ основной режим |
400 000,00₽ 140 418шт. |
Рынок |
Объём сделок, млн ₽ |
|---|---|
Основной рынок Т+ основной режим |
400 000,00₽ 140 418шт. |
Size нет ни у одного
из двенадцати наборов макета. Высота задана через min-height, а не height: при двух строках
содержимого MD-ячейка ровно 48, а SM растягивается до 41 — так же, как HUG в макете. Фиксированная высота
обрезала бы вторую строку.Разновидность |
Ячейка |
Что внутри |
|---|---|---|
text |
Основной рынок Т+ основной режим |
Основной текст и подпись |
amount |
400 000,00₽ 140 418шт. |
Число, суффикс единиц, второе число |
element |
Только вложенный компонент: иконка, чекбокс, радио, шеврон, тег, ссылка |
|
swap |
Исполнено |
Произвольный контент приложения |
edit-text |
Правка значения прямо в таблице |
|
edit-amount |
₽ |
То же для числа; показана рамка ошибки |
helpIcon |
Комиссия брокера |
Иконка справки в строке текста; размер — по лестнице шапки (16 · 16 · 20) |
actions |
Основной рынок |
Слот действий у правого края ячейки — до трёх иконок |
edit-*: она говорит «исправь», а исправлять можно лишь
редактируемое. Выключенного состояния у ячейки нет вовсе — «disabled» в таблице означает read-only для роли
пользователя, то есть свойство данных, а не состояние ячейки.Обычная |
заливки нет — виден контейнер --ds-surface-nb-base |
Зебра |
--ds-surface-nb-low |
Наведение |
--ds-nba-20 |
Нажатие |
--ds-nba-ghost-pressed |
Наведение на выделенную строку |
--ds-info-outline-hover |
Нажатие на выделенной строке |
--ds-info-outline-active |
Фокус |
Кольцо внутреннее — inset 0 0 0 2px |
--ds-info-outline-*: у ролей
Fill/Info/Ghost/* и Fill/Info/Outline/* в макете тождественная алиас-цепочка во всех четырёх
модах — разными их делает обводка, а она живёт в своём токене. Дубль значения не заводился.
Кольцо фокуса внутреннее, а не внешнее: общий --ds-focus-ring рисует кольцо снаружи с зазором,
и у соседних ячеек оно налезало бы друг на друга.Рынок |
Объём, млн ₽ |
|---|---|
Основной рынок |
400 000,00 |
Переговорные сделки |
150 000,00 |
Рынок РЕПО |
200 000,00 |
Рынок |
Объём, млн ₽ |
|---|---|
Основной рынок |
400 000,00 |
Переговорные сделки |
150 000,00 |
Рынок РЕПО |
200 000,00 |
tabular-nums). Фиксированные числа — IP-адреса, коды, серийные номера — левый: они не сравниваются.
Заголовок всегда выравнивается так же, как данные его колонки.Рынок |
Объём, млн ₽ |
|---|---|
Основной рынок |
400 000,00 |
Переговорные сделки |
150 000,00 |
Итого |
550 000,00 |
--ds-stroke-high), снизу линии нет.
В макете эта ось называется Total, и её значения перевёрнуты: итоговый вид даёт
Total=Off, обычный — Total=On. Проверено по геометрии: линия при Off стоит в
y=0, при On — в y=47 при высоте 48. В коде пропс назван по смыслу
(total=true → вид итога); расхождение записано, чтобы сверка Figma↔код не читала его как дрейф.
Боковая линия — псевдоэлемент, а не border-left: она короче ячейки, обычный бордер растянулся бы
на всю высоту.Основной рынок |
Переговорные сделки |
Рынок РЕПО |
Основной рынок |
Переговорные сделки |
Рынок РЕПО |
Static/Background-Blue/0 - Base — белым или чёрным по теме и инверсии
(#ffffff · #131316 · #020304 ·
#ffffff). Своей заливки у ячейки в покое нет, сквозь неё виден контейнер. Полосатая
строка возвращает шаг страницы 1 - Low
(#f6f8fc · #222629 · #1c2023 ·
#dee4ea), и он отличается от контейнера во всех четырёх темах — переключи тему и сравни
две верхние строки в любой из них.
Base. На
High Contrast (#ffffff · #222629 ·
#1c2023 · #ffffff) зебра совпала бы с ним в Light Invert и
Dark, и чередование в этих двух темах пропало бы.Токен |
SM |
MD |
LG |
|---|
site/tokens.css живым замером в браузере, а не переписаны
руками: переписанная таблица протухает молча.Клавиша |
Действие |
Кто исполняет |
|---|---|---|
Tab |
Фокус на следующий интерактивный элемент; пустые ячейки пропускаются |
Браузер |
↓ ↑ ← → |
Перемещение между ячейками — в таблице с интерактивными элементами |
Таблица |
Shift + ↓ ↑ ← → |
Прокрутка содержимого по вертикали и горизонтали |
Таблица |
Enter Space |
Активация интерактивного элемента после фокусировки |
Вложенный компонент |
Esc |
Выход из режима взаимодействия с элементами |
Таблица |
tabindex="-1"), рисует его и не крадёт Tab у своих детей.
Всё остальное — перемещение стрелками, прокрутка, roving-tabindex, роль таблицы, порядок обхода — принадлежит
таблице, то есть приложению. Это не пробел спеки, а граница компонента.