Pagination

Ссылки или кнопки для перехода между страницами результатов.

Браузеры: Chrome 123+Firefox 121+Safari 17.5+
Уровень: 0
Сжатый размер: 2.59 kB
Лимит принудительной компоновки: 0 ms
Лимит axe: 0
Совместим с SSR: Да
Публичный контракт: Тестовый стенд

Песочница

Pagination

React

CSS

Tailwind

import { Pagination } from "@gunkin/uiify";

export default function Example() {
  return (
    <Pagination.Root className="" count={20} defaultPage={5}>
      <Pagination.List />
    </Pagination.Root>
  );
}

@layer components {
  [data-uiify-pagination] ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  [data-uiify-pagination] li {
    display: grid;
    place-items: center;
  }

  /* Page links and the previous/next controls are Button-skinned (`ghost`); the current
     page is the selected one. Links stay links, so only the pointer is restored here. */
  [data-uiify-pagination] [data-type="ellipsis"] {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2.75rem;
    color: var(--muted-foreground);
  }
  [data-uiify-pagination] span[data-uiify-button]:not([data-disabled]) {
    cursor: default;
  }
  [data-uiify-pagination] svg {
    inline-size: 1rem;
    block-size: 1rem;
  }
}

import { Pagination } from "@gunkin/uiify";

export default function Example() {
  return (
    <Pagination.Root
      className="
        [&_ol]:flex [&_ol]:flex-wrap [&_ol]:items-center [&_ol]:justify-center [&_ol]:[gap:0.25rem] [&_ol]:list-none
        [&_ol]:p-0 [&_ol]:m-0 [&_li]:grid [&_li]:place-items-center [&_[data-type=ellipsis]]:inline-grid
        [&_[data-type=ellipsis]]:place-items-center [&_[data-type=ellipsis]]:[min-inline-size:2.75rem]
        [&_[data-type=ellipsis]]:text-muted-foreground [&_span[data-uiify-button]:not([data-disabled])]:cursor-default
        [&_svg]:[inline-size:1rem] [&_svg]:[block-size:1rem]
      "
      count={20}
      defaultPage={5}
    >
      <Pagination.List />
    </Pagination.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[&_ol]:flex [&_ol]:flex-wrap [&_ol]:items-center [&_ol]:justify-center [&_ol]:[gap:0.25rem] [&_ol]:list-none [&_ol]:p-0 [&_ol]:m-0 [&_li]:grid [&_li]:place-items-center [&_[data-type=ellipsis]]:inline-grid [&_[data-type=ellipsis]]:place-items-center [&_[data-type=ellipsis]]:[min-inline-size:2.75rem] [&_[data-type=ellipsis]]:text-muted-foreground [&_span[data-uiify-button]:not([data-disabled])]:cursor-default [&_svg]:[inline-size:1rem] [&_svg]:[block-size:1rem]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Pagination.Root`

Свойство	Тип	По умолчанию	Описание
`aria-label`	`string`	`"Pagination"`	Доступное название навигационной области.
`boundaryCount`	`number`	`1`	Число страниц, всегда показываемых на каждом конце диапазона.
`count`*	`number`	—	Общее число страниц.
`defaultPage`	`number`	`1`	Изначально выбранная страница неуправляемого компонента.
`disabled`	`boolean`	`false`	Отключает все страницы и элементы навигации.
`onPageChange`	`(page: number) => void`	—	Вызывается с новым номером страницы при каждом её изменении.
`page`	`number`	—	Текущая страница, делающая компонент управляемым.
`showFirstLast`	`boolean`	`false`	Добавляет в созданные пункты элементы перехода к первой и последней страницам.
`siblingCount`	`number`	`1`	Число страниц, показываемых с каждой стороны текущей страницы.
`children`	`ReactNode`	—	Собственная разметка пунктов; если не задана, отображается созданный список страниц.
`getPageHref`	`(page: number) => string`	—	Формирует href каждой страницы, чтобы серверная оболочка создавала настоящие ссылки, работающие без JavaScript.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Заменяет отображаемый элемент, сохраняя поведение и связи доступности.

`Pagination.List`

Свойство	Тип	По умолчанию	Описание
`children`	`ReactNode`	—	Пункты пагинации внутри списка.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Заменяет отображаемый элемент, сохраняя поведение и связи доступности.

`Pagination.Item`

Свойство	Тип	По умолчанию	Описание
`children`	`ReactNode`	—	Содержимое одного пункта списка пагинации.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Заменяет отображаемый элемент, сохраняя поведение и связи доступности.

`Pagination.Link`

Свойство	Тип	По умолчанию	Описание
`disabled`	`boolean`	`false`	Отключает элемент управления и удаляет его href.
`getPageHref`	`(page: number) => string`	—	Формирует href этой страницы, превращая элемент управления в настоящую ссылку.
`page`*	`number`	—	Номер страницы, выбираемой этим элементом управления.
`selected`	`boolean`	`false`	Помечает страницу текущей и задаёт ей aria-current.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Заменяет отображаемый элемент, сохраняя поведение и связи доступности.

`Pagination.Ellipsis`

Свойство	Тип	По умолчанию	Описание
`children`	`ReactNode`	—	Содержимое многоточия, скрытое от вспомогательных технологий.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Заменяет отображаемый элемент, сохраняя поведение и связи доступности.

Клавиатура

Клавиша	Действие
`Tab`	Перевести фокус на элемент управления или с него
`Enter` / `Space`	Активировать при наличии фокуса (для элементов управления типа кнопки)

Доступность

По возможности используется семантический HTML. Изучите разметку в песочнице: ARIA добавляется только там, где нативных элементов недостаточно.

Привязка стилей

data-disabled

Фреймворк

Стиль

Тема

Язык

Pagination

Песочница

Pagination

API

`Pagination.Root`

`Pagination.List`

`Pagination.Item`

`Pagination.Link`

`Pagination.Ellipsis`

Клавиатура

Доступность

Привязка стилей