Breadcrumbs и pagination

Breadcrumbs (хлебные крошки) — это компонент навигации, который отображает путь пользователя внутри приложения. Он помогает ориентироваться в сложной структуре страниц и улучшает UX, особенно в больших SPA на SvelteKit.

Основные концепции

  1. Структура компонентов В SvelteKit UI библиотеках обычно присутствуют следующие элементы:

    • Breadcrumbs — контейнер для всего пути.
    • BreadcrumbItem — отдельная крошка.
    • BreadcrumbLink — активная ссылка на страницу.

Пример типичной структуры:

<Breadcrumbs>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Главная</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/products">Продукты</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <span>Текущий продукт</span>
  </BreadcrumbItem>
</Breadcrumbs>
  1. Динамическая генерация В SvelteKit часто используют динамическое построение хлебных крошек на основе params роутов и состояния страницы.
<script>
  import { page } from '$app/stores';
  import { Breadcrumbs, BreadcrumbItem, BreadcrumbLink } from 'sveltekit-ui';

  $: crumbs = [
    { name: 'Главная', href: '/' },
    { name: $page.params.category, href: `/category/${$page.params.category}` },
    { name: $page.params.product, href: null }
  ];
</script>

<Breadcrumbs>
  {#each crumbs as crumb, i}
    <BreadcrumbItem>
      {#if crumb.href}
        <BreadcrumbLink href={crumb.href}>{crumb.name}</BreadcrumbLink>
      {:else}
        <span>{crumb.name}</span>
      {/if}
    </BreadcrumbItem>
  {/each}
</Breadcrumbs>

  1. Стилизация и состояние

    • Активная крошка (current) выделяется другим цветом или стилем шрифта.
    • Можно добавлять иконки между элементами или использовать кастомные разделители.
    • Некоторые библиотеки поддерживают автоматическую адаптацию для мобильных экранов.

Pagination в SvelteKit UI

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

Основные элементы

  • Pagination — контейнер для всей навигации.
  • PaginationItem — отдельная страница или кнопка управления (следующая/предыдущая).
  • PaginationLink — активная ссылка на страницу.
  • Ellipsis — отображение пропуска страниц при большом количестве элементов.

Пример базовой реализации:

<Pagination total={20} current={5} on:change={(e) => handlePageChange(e.detail)}>
  <PaginationItem>
    <PaginationLink href="/products?page=4">«</PaginationLink>
  </PaginationItem>
  {#each Array(20) as _, i}
    <PaginationItem>
      <PaginationLink href={`/products?page=${i+1}`} class:active={i+1 === 5}>{i+1}</PaginationLink>
    </PaginationItem>
  {/each}
  <PaginationItem>
    <PaginationLink href="/products?page=6">»</PaginationLink>
  </PaginationItem>
</Pagination>

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

  • В SvelteKit часто используют store или reactive переменные для отслеживания текущей страницы.
  • Можно автоматически подгружать данные через load функции, используя параметр page из query.
<script>
  import { page } from '$app/stores';
  import { Pagination, PaginationItem, PaginationLink } from 'sveltekit-ui';

  $: currentPage = +$page.url.searchParams.get('page') || 1;
  $: totalPages = 50;

  function handlePageChange(newPage) {
    // Обновление URL без перезагрузки
    const url = new URL(window.location);
    url.searchParams.set('page', newPage);
    history.pushState(null, '', url);
  }
</script>

<Pagination total={totalPages} current={currentPage} on:change={handlePageChange}>
  {#each Array(totalPages) as _, i}
    <PaginationItem>
      <PaginationLink href={`?page=${i+1}`} class:active={i+1 === currentPage}>{i+1}</PaginationLink>
    </PaginationItem>
  {/each}
</Pagination>

Расширенные возможности

  • Адаптивная пагинация: скрытие промежуточных страниц и использование Ellipsis.
  • Переключение на клавиатуре: стрелки навигации между страницами.
  • Интеграция с API: загрузка данных на основе текущей страницы без полной перезагрузки.

Советы по использованию вместе

  • Breadcrumbs и Pagination часто комбинируют в больших каталогах и админ-панелях.
  • Breadcrumbs отражает путь, Pagination — делит контент на части.
  • Для динамических сайтов важно синхронизировать оба компонента с состоянием роутера в SvelteKit, используя page store и reactive statements.

Эффективное использование этих компонентов улучшает UX, делает интерфейс понятным и управляемым, а также облегчает поддержку кода в больших проектах на SvelteKit.

Оглавление