@digital-butlers/pagination

Digital Butlers Pagination

Библиотека для создания пагинации с гибкими настройками.

Содержание

• Установка
• Быстрый старт
• Конфигурация
• Публичные методы
• События
• CSS классы
• TypeScript типы
• Доступность
• URL параметры

Установка

npm install @digital-butlers/pagination
# или
yarn add @digital-butlers/pagination
# или
pnpm add @digital-butlers/pagination

Быстрый старт

import { Pagination } from '@digital-butlers/pagination';
import '@digital-butlers/pagination/css';

new Pagination('[data-pagination="wrapper"]', {
	itemsPerPage: 10,
});

Конфигурация

Параметр	Тип	По умолчанию	Описание
paginationWrapperSelector	string	'[data-pagination="container"]'	CSS селектор контейнера пагинации
dynamicElementSelector	string	'.w-dyn-item[role="listitem"]'	CSS селектор элементов для пагинации
previousButtonInner	string | Node	'Prev'	Содержимое кнопки "Назад"
nextButtonInner	string | Node	'Next'	Содержимое кнопки "Вперед"
previousButtonClassnames	string[]	[]	Дополнительные классы для кнопки "Назад"
nextButtonClassnames	string[]	[]	Дополнительные классы для кнопки "Вперед"
regularButtonClassnames	string[]	[]	Дополнительные классы для кнопок с номерами
itemsPerPage	number	-	Количество элементов на странице
emptyMapInner	string	'...'	Текст для пропущенных номеров страниц
pageNumberTransformer	(number: number) => string	(n) => n.toString()	Функция преобразования номеров страниц
hiddenButtons	{ min: number }	{ min: 6 }	Минимальное количество видимых кнопок
devMode	boolean	false	Режим разработки с дополнительными предупреждениями

Публичные методы

Метод	Описание
update()	Обновляет состояние пагинации
goToCurrent()	Переходит на текущую страницу
addPageParam()	Добавляет параметр страницы в URL

События

Событие	Параметры	Описание
afterInit	(pagination: Pagination)	Вызывается после инициализации
change	(pagination: Pagination)	Вызывается при смене страницы
click	(pagination: Pagination)	Вызывается при клике на кнопку

new Pagination('[data-pagination="wrapper"]', {
	itemsPerPage: 10,
	on: {
		afterInit: (pagination) => console.log('Инициализация завершена'),
		change: (pagination) => console.log('Текущая страница:', pagination.currentPage),
		click: (pagination) => console.log('Клик по кнопке'),
	},
});

CSS классы

Класс	Описание
.js--pagination-button	Базовый класс для всех кнопок пагинации
.js--pagination-current	Класс для текущей активной страницы
.js--pagination-empty-place	Класс для пропущенных номеров страниц
.js--unactive	Класс для неактивной пагинации
.js--hidden-by-pagination	Класс для скрытых элементов
.js--active	Класс для активных элементов
.js--visible	Класс для видимых элементов

TypeScript типы

interface PaginationConfigModel {
	paginationWrapperSelector?: string;
	dynamicElementSelector?: string;
	previousButtonInner?: string | Node;
	nextButtonInner?: string | Node;
	itemsPerPage: number;
	pageNumberTransformer?: PageNumberTransformer;
	emptyMapInner?: string;
	hiddenButtons?: {
		min: number;
	};
	on?: EventModel;
	previousButtonClassnames?: string[];
	nextButtonClassnames?: string[];
	regularButtonClassnames?: string[];
	devMode?: boolean;
}

interface EventModel {
	afterInit?: (pagination: Pagination) => void;
	change?: (pagination: Pagination) => void;
	click?: (pagination: Pagination) => void;
}

type PageNumberTransformer = (number: number) => string;

Доступность

Библиотека автоматически добавляет:

• aria-label для всех кнопок
• role="button" для элементов навигации
• Поддержку клавиатурной навигации
• Атрибут inert для скрытых элементов
• Атрибут disabled для неактивных кнопок
• Корректные значения tabindex

URL параметры

Библиотека автоматически:

• Добавляет параметр page в URL
• Синхронизирует состояние с URL
• Поддерживает навигацию по истории браузера
• Добавляет rel="prev" и rel="next" для SEO

Лицензия

MIT