Pagination для постраничной навигации

Pagination — компонент для организации навигации по страницам, часто используется в таблицах, списках или каруселях, где объем данных слишком велик для отображения на одной странице. В Carbon Components Svelte он реализован с учетом реактивности Svelte и предоставляет гибкий и настраиваемый API.

Установка и импорт

Для использования Pagination необходимо установить пакет Carbon Components Svelte через npm:

npm install carbon-components-svelte

Импорт компонента в Svelte-файл:

<script>
  import { Pagination } from 'carbon-components-svelte';
  
  let currentPage = 1;
  let pageSize = 10;
  let totalItems = 100;
</script>

Основные свойства

Pagination имеет ряд ключевых свойств, влияющих на отображение и поведение:

  • page — текущая страница (тип number). Реактивное значение, которое обновляется при смене страницы.
  • pageSize — количество элементов на одной странице (тип number). Может быть динамическим.
  • totalItems — общее количество элементов (тип number). Используется для расчета числа страниц.
  • pageSizes — массив допустимых размеров страницы, например [10, 20, 50].
  • on:change — событие, которое вызывается при смене страницы или размера страницы. Передает объект с page и pageSize.

Пример использования:

<Pagination
  {page}
  {pageSize}
  {totalItems}
  pageSizes={[10, 20, 50]}
  on:change={(e) => {
    currentPage = e.detail.page;
    pageSize = e.detail.pageSize;
  }}
/>

Реактивное управление страницами

Svelte позволяет автоматически обновлять интерфейс при изменении переменных. Для Pagination это означает, что изменение currentPage или pageSize сразу отражается на компоненте:

<script>
  $: start = (currentPage - 1) * pageSize + 1;
  $: end = Math.min(currentPage * pageSize, totalItems);
</script>

<p>Показано элементов с {start} по {end} из {totalItems}</p>

Такой подход позволяет интегрировать Pagination с таблицами и списками, обновляя видимые элементы при изменении страницы.

Пользовательский рендеринг элементов

Pagination предоставляет возможность кастомизации через слоты и CSS-классы. Например, можно изменить отображение текста:

<Pagination
  {page}
  {pageSize}
  {totalItems}
  pageSizes={[10, 20, 50]}
  i18n={{
    items_per_page: 'Элементов на странице',
    page: 'Страница',
    of: 'из'
  }}
/>

Свойство i18n позволяет локализовать текст внутри компонента.

Интеграция с таблицами

Pagination часто используется с таблицами. В Carbon Components Svelte это делается через реактивные выражения:

<script>
  import { DataTable, Table, TableHead, TableRow, TableCell } from 'carbon-components-svelte';

  let data = Array.from({length: 100}, (_, i) => ({id: i + 1, name: `Элемент ${i + 1}`}));
  $: pagedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
</script>

<DataTable {pagedData}>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>ID</TableCell>
        <TableCell>Название</TableCell>
      </TableRow>
    </TableHead>
    {#each pagedData as row}
      <TableRow>
        <TableCell>{row.id}</TableCell>
        <TableCell>{row.name}</TableCell>
      </TableRow>
    {/each}
  </Table>
</DataTable>

<Pagination
  {page}
  {pageSize}
  {totalItems}
  pageSizes={[10, 20, 50]}
  on:change={(e) => {
    currentPage = e.detail.page;
    pageSize = e.detail.pageSize;
  }}
/>

В этом примере pagedData всегда содержит только элементы текущей страницы.

Важные нюансы

  • Pagination не управляет самими данными, он только сообщает текущую страницу и размер страницы. Логику фильтрации данных необходимо реализовать самостоятельно.
  • Если page выходит за пределы возможных страниц после изменения totalItems или pageSize, компонент автоматически корректирует текущее значение.
  • Можно использовать разные размеры страниц, передавая массив pageSizes. Это особенно удобно для адаптивных интерфейсов.

Продвинутая кастомизация

С помощью CSS-классов можно изменять стили Pagination:

<Pagination class="custom-pagination" ... />

А затем в стилях:

.custom-pagination .bx--pagination__button {
  background-color: #f0f0f0;
  border-radius: 4px;
}

Также доступна замена элементов через слоты, например, для кнопок «Следующая» и «Предыдущая» страницы.

Pagination в Carbon Components Svelte обеспечивает мощный и гибкий инструмент для реализации постраничной навигации, интегрируемый с таблицами, списками и другими компонентами, с полным контролем над поведением и внешним видом. Реактивность Svelte позволяет легко управлять данными и отображением, а система событий и локализация делают компонент готовым к любым проектным требованиям.

Оглавление