Fisht

Pagination

Компонент Pagination (пагинация) позволяет навигироваться между страницами данных.

Базовое использование

Компонент Pagination помогает перемещаться по большим наборам данных, разбивая их на страницы. Вы можете легко настроить количество видимых страниц, элементов на странице и другие параметры.

1/12
3/60
1/25
1/25
<Pagination 
    :total="120" 
    :modelValue="1" 
    :sizePage="10">
</Pagination>
<Pagination 
    :total="500" 
    :modelValue="1" 
    :sizePage="20" 
    :isInfoText="true">
</Pagination>
<Pagination 
    :total="300" 
    :modelValue="3" 
    :visibleNumberPages="7">
</Pagination>

Для начала работы укажите общее количество элементов (total), текущую страницу (modelValue) и количество элементов на странице (sizePage).

Текущая страница

Текущая активная страница. Управляйте ей с помощью пропса modelValue.

1/20
5/20
<Pagination :total="100" :modelValue="1"></Pagination>
<Pagination :total="100" :modelValue="5"></Pagination>

Режимы стилизации

Выберите внешний вид пагинации с помощью пропса mode. Доступны варианты: outlined (контурный), filled (заполненный) и underlined (подчеркнутый).

1/20
1/20
1/20
<Pagination :total="100" mode="outlined"></Pagination>
<Pagination :total="100" mode="filled"></Pagination>
<Pagination :total="100" mode="underlined"></Pagination>

Элементов на странице

Управляйте количеством элементов на странице через пропс sizePage.

1/10
1/5
<Pagination :total="100" :sizePage="10"></Pagination>
<Pagination :total="100" :sizePage="20"></Pagination>

Выбор количества элементов

Позволяет пользователям выбирать количество элементов на странице через выпадающий список. Используйте пропс sizesSelector для настройки доступных значений и isPageSizeSelector для включения функционала.

1/10
1/10
<Pagination 
    :total="100" 
    :sizePage="10"
    :sizesSelector="[5, 10, 25]" 
    :isPageSizeSelector="true">
</Pagination>
<Pagination 
    :total="100" 
    :sizePage="10"
    :sizesSelector="[10, 20, 50]" 
    :isPageSizeSelector="true">
</Pagination>

Видимые страницы

Если страниц много, ограничьте количество отображаемых номеров с помощью пропса visibleNumberPages.

1/20
1/20
<Pagination :total="100" :visibleNumberPages="5"></Pagination>
<Pagination :total="100" :visibleNumberPages="7"></Pagination>

Общее количество элементов

Укажите общее количество элементов через пропс total — это определит количество страниц.

1/10
1/40
<Pagination :total="50"></Pagination>
<Pagination :total="200"></Pagination>

Информационный текст

Включите текстовую подсказку о текущем диапазоне элементов (например, "1-10 из 100") с помощью пропса isInfoText.

1/20
<Pagination :total="100" :isInfoText="true"></Pagination>

Переключатель выбора количества

Разрешите пользователям изменять количество элементов на странице через пропс isPageSizeSelector.

1/20
<Pagination :total="100" :isPageSizeSelector="true"></Pagination>

Скрытие кнопок навигации

Для минималистичного дизайна скройте кнопки "Назад"/"Вперед" через пропс isHiddenNavigationButtons.

1/20
<Pagination :total="100" :isHiddenNavigationButtons="true"></Pagination>

Кастомные стили

Добавьте собственные CSS-классы через пропс class для тонкой настройки внешнего вида.

1/20
<Pagination :total="100" class="custom-pagination-class"></Pagination>
© 2025 FishtVue by Egoka