CSS: pagination ​

.instui-pagination — تنقل الصفحات: صفحات مرقمة، أسهم الأول/السابق/التالي/الأخير، ونقطة الحذف للفجوات.

راجع العضو pagination.page لعناصر التحكم في الصفحة الفردية.

Source: page.css

سهولة الوصول ​

وسّم <nav> باستخدام aria-label، وعَيّن الصفحة الحالية بـ aria-current="page"، وأعطِ كل سهم aria-label، وعطّل أسهم النهاية باستخدام disabled أو aria-disabled="true".

الاستخدام ​

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

أمثلة ​

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

الهيكل ​

text
.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*=&quot;-icon-&quot;]"):::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

مكونات فرعية ​