Pagination
Пагінація з діапазоном записів, розміром сторінки та мобільним виглядом «X з Y».
Зведено з кількох реалізацій TablePagination — діапазон «1–20 з 437», вибір розміру сторінки, усічений ряд номерів із «…». На мобільному ряд номерів ховається — лишається «X з Y» і стрілки, бо влучити пальцем у «14» з восьми квадратиків по 32px нереально.
Приклад
Сторінка 3 із 22, розмір 20.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
page* | number | — | Поточна сторінка. Використовуйте через `v-model:page`. |
totalPages* | number | — | Скільки всього сторінок. |
totalItems | number | null | Загальна кількість записів — для тексту «1–20 з 437». |
pageSize | number | undefined | Розмір сторінки. Використовуйте через `v-model:pageSize`. |
pageSizeOptions | number[] | undefined | Варіанти розміру сторінки. Порожньо — селект не рендериться. |
siblingCount | number | 1 | Скільки сусідніх сторінок показувати навколо активної. |
disabled | boolean | false | — |
Події
| Назва | Payload | Опис |
|---|---|---|
update:page | [value: number] | Новий номер сторінки. Використовуйте через `v-model:page`. |
update:pageSize | [value: number] | Новий розмір сторінки. Використовуйте через `v-model:page-size`. |
Коли використовувати
Для серверної пагінації таблиць і списків. Разом з UiTable: активуйте
rowClickable у таблиці й керуйте сторінкою ззовні.
Коли НЕ використовувати
Для стрічок, що підтягуються нескінченно (feed), — там пагінація ламає скрол; потрібен «Показати ще».
Не показуйте компонент для однієї сторінки: він сам не рендериться, коли
totalPages ≤ 1 і немає pageSizeOptions.
Доступність
Контейнер — <nav aria-label="Пагінація">, активна сторінка —
aria-current="page". Стрілки мають aria-label, бо іконки без тексту
для скрінрідера безіменні. Числові колонки вирівняні tabular-nums.
Кнопка сторінки ключується самою сторінкою, а не позицією в ряду. Ряд
змінює довжину (від 4 до 7 пунктів), і з індексом у ключі Vue
перестворював саме натиснуту кнопку: фокус падав на <body>, і наступний
Tab починав з шапки сайту.
Номери сторінок, як і стрілки, мають невидиму зону дотику 45×45: з md на
планшеті вони лише 30px. Вимкнена пагінація блякне цілком і не реагує на
наведення — раніше номери лишались «живими», тьмяніли тільки стрілки.
Селект розміру сторінки на мобільному — рівно 16px, а не text-base: за
кореня 15px text-base дає 15px, і iOS Safari зумував сторінку при фокусі.