Pagination
Навигация по страницам длинного списка: номера, стрелки, поле быстрого перехода
и — по желанию — строка диапазона с выбором размера страницы.
Размеры
коллекция переменных «❖ Pagination», режимы MD и SM
MD
ячейка 40 · отступ 8 · радиус 12 · текст 16/20 · разрядка 16
SM
ячейка 32 · отступ 6 · радиус 8 · текст 14/16 · разрядка 12
Сокращение
спека § Truncation: до семи страниц видны все
7 страниц — многоточия нет
8 страниц — появляется многоточие
250 страниц, текущая в середине — многоточие с обеих сторон
многоточие — кнопка: по ней открывается список пропущенных страниц
Края списка
спека § Кнопки «Назад» и «Вперёд»
первая страница — «Назад» погашена
последняя — погашена «Вперёд»
выключено целиком
выбранная на Fill/Disable, остальные на Text/Disable
Select Range
вариантная ось набора · спека § Количество отображаемых результатов
Select Range = On
смена размера страницы перестраивает список и возвращает на первую страницу
Mobile
вариантная ось набора · минимальная ширина 320
Mobile = On
ячейки «Mobile = On + Select Range = On» в макете нет: строка диапазона не помещается
Токены
снято Plugin API с набора 1159:27908 и «.Parts / Page» 1097:18358
| Что | Figma | Токен / величина |
|---|
| Ячейка в покое | Text/Neutral-Blue/Ghost/Default | --ds-text-neutral-ghost |
| Наведение | Fill/Neutral-Blue/Ghost/Hover | --ds-nba-20 |
| Нажатие | Fill/Neutral-Blue/Ghost/Pressed | --ds-nba-ghost-pressed |
| Выбранная | Fill/Neutral-Blue/Solid/Default | --ds-neutral-fill |
| Текст выбранной | Text/Neutral-Blue/Solid/Default | --ds-text-invert |
| Выключена | Text/Disable/Neutral (Blue) | --ds-disabled-text |
| Выключена и выбрана | Fill/Disable/Neutral (Blue) | --ds-disabled-fill |
| Высота и мин. ширина | Pages/Height · Pages/Min width — MD 40, SM 32 | calc(--ds-comp-unit × 10 / × 8) |
| Внутренний отступ | Pages/Left-Right · Top-Bottom — MD 8, SM 6 | calc(--ds-comp-unit × 2 / × 1.5) |
| Скругление | Pages/Radius — MD 12, SM 8 | --ds-radius-lg · --ds-radius-md |
| Разрядка номеров | Gap — MD 16, SM 12 | calc(--ds-comp-unit × 4 / × 3) |
| Текст номера | Pages/Text Style — MD 16/20, SM 14/16 | --ds-text-md · --ds-text-base |
| Разрядка между группами | 31 без привязки к переменной | взято 32 — вопрос владельцу |
Правила использования
03_Components/Pagination/Pagination.md
Так
- Первая страница выбрана при загрузке; «Назад» погашена
- Стрелки гаснут на краях — это и есть сигнал «дальше пути нет»
- Многоточие кликабельно: за ним список пропущенных страниц
- Enter в поле перехода уводит на страницу и очищает поле
- Смена размера страницы возвращает на первую
Не так
- Как основная навигация по разделам сайта — это Breadcrumbs или Tabs
- Наведение на выбранную страницу: она не реагирует и не даёт курсор-указатель
- Ряд номеров на узком экране — ниже 320px включается мобильный режим
- Строка диапазона в мобильном режиме — не помещается, такой ячейки нет и в макете
State Explorer
Интерактивный тест состояний