CSS: pagination

.instui-pagination — Điều hướng trang: các trang có đánh số, mũi tên first, previous, next và last, và dấu chấm lửng cho các khoảng trống.

Xem thành viên pagination.page để biết các điều khiển cho từng trang.

Source: page.css

Khả năng truy cập

Gán nhãn cho <nav> bằng aria-label, đánh dấu trang hiện tại bằng aria-current="page", cung cấp aria-label cho mỗi mũi tên, và vô hiệu hóa các mũi tên cuối bằng disabled hoặc aria-disabled="true".

Sử dụng

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

Các ví dụ

<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>

Cấu trúc

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

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

Bộ sửa

Bộ sửa	Mô tả
.-icon-*	Hiển thị các biểu tượng mũi tên (glyph) bên trong các điều khiển first/prev/next/last.
.-variant-input	Phiên bản nhỏ gọn có ô nhập số trang.

Phần

Phần	Mô tả
.arrow	Một điều khiển first, previous, next, hoặc last.
.ellipsis	Ký hiệu khoảng trống giữa các dải trang.
.page-input-label	Nhãn cho ô nhập số trang (biến thể input).

Trạng thái

Trạng thái	Mô tả
[aria-disabled="true"]	—
:disabled	—

Token tiêu thụ

Token	Kiểu	Giá trị
--instui-border-width-md	<length>	0.125rem
--instui-color-background-muted	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-color-text-interactive-navigation-primary-base	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-color-text-interactive-navigation-primary-hover	<color>	LightDarklight-dark(#1A5281, #ACCDF7)
--instui-color-text-muted	<color>	LightDarklight-dark(#576773, #AAB0B5)
--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>	LightDarklight-dark(#273540, #F2F4F5)
--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

Các thành phần phụ

• pagination.page