CSS: pagination

.instui-pagination — Oldal navigációs: számozott oldalak, első, előző, következő és utolsó nyilak, és ellipszis a hézagokhoz.

Forrás: pagination.css

Akadálymentesség

Jelölje meg az <nav> -t az aria-label-lel, jelölje meg az aktuális oldalt az aria-current="page" -vel, adjon minden nyílnak egy aria-label-t, és letiltsa a végnyílakat a disabled vagy aria-disabled="true" -val.

Használat

@import "@pantoken/components/components.css";
@import "@pantoken/components/pagination.css";

Példák

<nav class="instui-pagination" aria-label="Pagination">
  <button class="arrow" type="button" aria-label="First page" disabled><span class="instui-icon -icon-chevrons-left"></span></button>
  <button class="arrow" type="button" aria-label="Previous page" disabled><span class="instui-icon -icon-chevron-left"></span></button>
  <a class="page" href="#" aria-current="page">1</a>
  <a class="page" href="#">2</a>
  <a class="page" href="#">3</a>
  <span class="ellipsis">…</span>
  <a class="page" href="#">12</a>
  <a class="arrow" href="#" aria-label="Next page"><span class="instui-icon -icon-chevron-right"></span></a>
  <a class="arrow" href="#" aria-label="Last page"><span class="instui-icon -icon-chevrons-right"></span></a>
</nav>

123…12

Felépítés

.instui-pagination
  .arrow
    [class*="-icon-"] (0..1)
  .page
  .ellipsis

flowchart TD n0[".instui-pagination"]:::cssdoc-root n1(".arrow"):::cssdoc-part n2("[class*="-icon-"]"):::cssdoc-part n3(".page"):::cssdoc-part n4(".ellipsis"):::cssdoc-part n1 -.->|0..1| n2 n0 --> n1 n0 --> n3 n0 --> n4 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Módosítók

Módosító	Leírás
.-icon-*	Nyílikon glif ikonokat jelenítsen meg az első/előző/következő/utolsó vezérlőkben.
.-variant-input	Tömör változat oldalszám-bevitellel.

Részek

Rész	Leírás
.arrow	Egy első, előző, következő vagy utolsó vezérlő.
.ellipsis	A hézag jelölő az oldaltartományok között.
.page	Egy oldallink vagy gomb; az aktuális oldal az [aria-current] -t hordozza.
.page-input-label	Az oldalszám-bevitel címkéje (beviteli változat).

Állapotok

Állapot	Leírás
:state(current)	—
:disabled	—

Felhasznált tokenek

Token	Típus	Érték
--instui-border-width-md	<length>	0.125rem
--instui-color-background-interactive-action-primary-base	<color>	light-dark(#1D354F, #EEF4FD)LightDark
--instui-color-background-interactive-action-primary-hover	<color>	light-dark(#234465, #ffffff)LightDark
--instui-color-background-muted	<color>	light-dark(#F2F4F5, #273540)LightDark
--instui-color-text-interactive-action-primary-base	<color>	light-dark(#ffffff, #1D354F)LightDark
--instui-color-text-interactive-navigation-primary-base	<color>	light-dark(#2369A4, #7FB4F1)LightDark
--instui-color-text-interactive-navigation-primary-hover	<color>	light-dark(#1A5281, #ACCDF7)LightDark
--instui-color-text-muted	<color>	light-dark(#576773, #AAB0B5)LightDark
--instui-component-base-button-border-radius	<length>	0.75rem
--instui-component-pagination-page-indicator-gap	<length>	0.5rem
--instui-component-pagination-page-input-input-spacing	<length>	0.5rem
--instui-component-pagination-page-input-input-width	<length>	4.5rem
--instui-component-pagination-page-input-label-color	<color>	light-dark(#273540, #F2F4F5)LightDark
--instui-font-family-base	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-font-weight-interactive	<integer>	500
--instui-opacity-disabled	<number>	0.5
--instui-spacing-space-xs	<length>	0.25rem
--instui-spacing-space2xs	<length>	0.125rem