Pagination
Общая информация
Пагинация (рagination) – это элемент управления, который находится внизу страницы и позволяет пользователю легко перемещаться между ними. Рекомендуется использовать для однотипных данных, таких как таблицы.
Анатомия
Выпадающий список записей для выбора количества элементов на странице. Вы можете настроить параметры размера страницы.
Дополнительные сведения: указывает отображаемое количество строк из общего количества.
Иконка. Элемент управления навигацией. Перемещение по доступным страницам вперёд и назад, по возрастанию и убыванию.
Номера страниц, так же являющиеся ссылками на страницу.
Выбранная страница
Сокращение. При достижении порогового значения страниц список сокращается с помощью многоточия.
Описание работы
Принцип работы
При постраничной пагинации, мы нажимаем на другую страницу, после чего приходят новые данные и затирают предыдущие. Идет направленный поток данных — информация меняется и выводится новая. При переходе на следующую или на предыдущую страницы процесс повторяется и новые данные затирают предыдущие.
Интерактивность
При клике на номер страницы, ссылка на эту страницу меняет состояние на Pressed и становится неактивной для клика.
Показываем одну страницу за раз — чтобы перейти дальше необходимо воспользоваться кнопками с номерами страниц или «Назад»/«Вперёд». Если пользователь находится на первой странице — кнопка «назад» неактивна. Если пользователь находится на последней странице — кнопка «вперед» неактивна.
При изменении количества отображаемых элементов пользовательский фокус не меняется.
Состав пагинации
Состав панели пагинации зависит от решаемых задач. В зависимости от требований в её состав, могут не входить те или иные элементы.
Когда использовать
Используйте пагинацию, когда вам нужен сложный шаблон разбивки на страницы, который требует изменения размера страницы и повторного вычисления количества страниц.
Используется преимущественно в таблицах. В крайне редких случаях может быть применён в иных контентных блоках, но подобные случаи будут рассматриваться в индивидуальном порядке.
Это необходимо для оптимизации скорости загрузки и чтобы вписать данные в размер страницы. Последнее необходимо, чтобы пользователю было легче охватить блок информации.
Для разделения больших объемов данных или контента на фрагменты
Для повышения производительности загрузки системы
Чтобы упростить понимание пользователем данных / контента
Чтобы упростить поиск информации
Чтобы показать, сколько страниц контента существует
Чтобы показать сколько результатов было возвращено
Размеры
Внешние размеры
Высота пагинации всегда 40 px.
Ширина зависит от задачи, разрешения монитора и требований.
Типографика
Внутренние размеры
Внутренние отступы между элементами:
Цвета
Общее
Фон панели пагинации: #FFFFFF — G1
Заголовок выбора строк на странице: #777B92 — G7
Дополнительные сведенья (отображаемое количество строк из общего количества): #BFC6D7 — G4
Управляющие элементы (< назад, вперед >):
не активный: #BFC6D7 — G4
активный: #8D91A4 — G6
Страницы-кнопки
Выбор строк на странице (dropdown)
Last updated
