Paginator
Last updated
Was this helpful?
Last updated
Was this helpful?
Пагинатор (рaginator) – это элемент управления, который находится внизу страницы и позволяет пользователю легко перемещаться между ними. Рекомендуется использовать для однотипных данных, таких как таблицы.
Выпадающий список записей для выбора количества элементов на странице. Вы можете настроить параметры размера страницы.
Дополнительные сведения: указывает отображаемое количество строк из общего количества.
Иконка. Элемент управления навигацией. Перемещение по доступным страницам вперёд и назад, по возрастанию и убыванию.
Номера страниц, так же являющиеся ссылками на страницу.
Выбранная страница
Сокращение. При достижении порогового значения страниц список сокращается с помощью многоточия.
При постраничной пагинации, мы нажимаем на другую страницу, после чего приходят новые данные и затирают предыдущие. Идет направленный поток данных — информация меняется и выводится новая. При переходе на следующую или на предыдущую страницы процесс повторяется и новые данные затирают предыдущие.
При клике на номер страницы, ссылка на эту страницу меняет состояние на Pressed и становится неактивной для клика.
Показываем одну страницу за раз — чтобы перейти дальше необходимо воспользоваться кнопками с номерами страниц или «Назад»/«Вперёд». Если пользователь находится на первой странице — кнопка «назад» неактивна. Если пользователь находится на последней странице — кнопка «вперед» неактивна.
При изменении количества отображаемых элементов пользовательский фокус не меняется.
Состав панели пагинации зависит от решаемых задач. В зависимости от требований в её состав, могут не входить те или иные элементы.
Используйте пагинацию, когда вам нужен сложный шаблон разбивки на страницы, который требует изменения размера страницы и повторного вычисления количества страниц.
Используется преимущественно в таблицах. В крайне редких случаях может быть применён в иных контентных блоках, но подобные случаи будут рассматриваться в индивидуальном порядке.
Это необходимо для оптимизации скорости загрузки и чтобы вписать данные в размер страницы. Последнее необходимо, чтобы пользователю было легче охватить блок информации.
Для разделения больших объемов данных или контента на фрагменты
Для повышения производительности загрузки системы
Чтобы упростить понимание пользователем данных / контента
Чтобы упростить поиск информации
Чтобы показать, сколько страниц контента существует
Чтобы показать сколько результатов было возвращено
Высота пагинации всегда 40 px.
Ширина зависит от задачи, разрешения монитора и требований.
Dropdown Select
S-24
Номера страниц (button)
S-24
Иконки
16px * 16px
Панель пагинации
Height: 40px
“Строк на странице”
.Input/label
Inter
12px
Semi Bold
Доп. сведенья
.Input/label
Inter
12px
Semi Bold
“Вперёд/Назад”
.Button&Links/btn-12px
Inter
12px
Semi Bold
Номера страниц
.Button&Links/btn-12px
Inter
12px
Semi Bold
Внутренние отступы между элементами:
Фон панели пагинации: #FFFFFF — G1
Заголовок выбора строк на странице: #777B92 — G7
Дополнительные сведенья (отображаемое количество строк из общего количества): #BFC6D7 — G4
Управляющие элементы (< назад, вперед >):
не активный: #BFC6D7 — G4
активный: #8D91A4 — G6
Secondary
Текст: #8D91A4 — G6 Фокус: #D6E5FF — B1-20
Текст: #8D91A4 — G6 Тело: #F4F6FB — G2 Фокус: #D6E5FF — B1-20
Текст: #8D91A4 — G61 Тело: #D6E5FF — B1-20 Фокус: #D6E5FF — B1-20
Disable
Текст: #BFC6D7 — G4
Текст: #BFC6D7 — G4
Текст: #BFC6D7 — G4 Тело: #F4F6FB — G2
Выбор срок на странице (dropdown)
Текст: #20222B — G12 Тело: #F4F6FB — G2 Обводка: #BFC6D7 — G4 Фокус: #D6E5FF — B1-20
Текст: #20222B — G12 Тело: #F4F6FB — G2 Обводка: #337EFF — B1 Фокус: #D6E5FF — B1-20
Текст: #20222B — G12 Тело: #F4F6FB — G2 Обводка: #337EFF — B1 Фокус: #D6E5FF — B1-20
Текст: #20222B — G12 Тело: #F4F6FB — G2
