Pagination

Общая информация

Пагинация (рagination) – это элемент управления, который находится внизу страницы и позволяет пользователю легко перемещаться между ними. Рекомендуется использовать для однотипных данных, таких как таблицы.

Анатомия

1. Выпадающий список записей для выбора количества элементов на странице. Вы можете настроить параметры размера страницы.

2. Дополнительные сведения: указывает отображаемое количество строк из общего количества.

3. Иконка. Элемент управления навигацией. Перемещение по доступным страницам вперёд и назад, по возрастанию и убыванию.

4. Номера страниц, так же являющиеся ссылками на страницу.

5. Выбранная страница

6. Сокращение. При достижении порогового значения страниц список сокращается с помощью многоточия.

Описание работы

Принцип работы

При постраничной пагинации, мы нажимаем на другую страницу, после чего приходят новые данные и затирают предыдущие. Идет направленный поток данных — информация меняется и выводится новая. При переходе на следующую или на предыдущую страницы процесс повторяется и новые данные затирают предыдущие.

Интерактивность

При клике на номер страницы, ссылка на эту страницу меняет состояние на 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

Страницы-кнопки

	Default	Hover	Pressed
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)

	Default	Hover	Active	Disabled
Выбор срок на странице (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