CSS: pagination

.instui-pagination — 페이지 탐색: 번호가 매겨진 페이지, 처음/이전/다음/마지막 화살표 및 간격을 표시하는 줄임표.

개별 페이지 컨트롤은 pagination.page 멤버를 참조하세요.

Source: page.css

접근성

<nav>에 aria-label을 지정하고 현재 페이지는 aria-current="page"로 표시하며, 각 화살표에 aria-label을 부여하고 끝 화살표는 disabled 또는 aria-disabled="true"로 비활성화하세요.

사용법

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

예제들

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

구조

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

수정자

수정자	설명
.-icon-*	첫/이전/다음/마지막 컨트롤 내부에 화살표 글리프 아이콘을 렌더링하세요.
.-variant-input	페이지 번호 입력을 포함한 컴팩트 변형.

부분

부분	설명
.arrow	처음, 이전, 다음 또는 마지막 컨트롤 중 하나.
.ellipsis	페이지 범위 사이의 갭 표시자.
.page-input-label	페이지 번호 입력(입력 변형)에 대한 레이블.

상태

상태	설명
[aria-disabled="true"]	—
:disabled	—

사용된 토큰

Token	타입	값
--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

하위 컴포넌트

• pagination.page