رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

صفحه‌بندی

وضعیت: پیش‌نویس 
<nav aria-label="صفحه‌بندی">
  <ul class="hq-pagination">
    <li><a class="hq-pagination__item" href="#" aria-label="صفحهٔ قبلی"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M22 16 12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z"/></svg></a></li>
    <li><a class="hq-pagination__item" href="#">۱</a></li>
    <li><a class="hq-pagination__item" href="#" aria-current="page">۲</a></li>
    <li><a class="hq-pagination__item" href="#">۳</a></li>
    <li><span class="hq-pagination__gap" aria-hidden="true">…</span></li>
    <li><a class="hq-pagination__item" href="#">۹</a></li>
    <li><a class="hq-pagination__item" href="#" aria-label="صفحهٔ بعدی"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M10 16 20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"/></svg></a></li>
  </ul>
</nav>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • برای فهرست‌های طولانی که یک‌جا بار نمی‌شوند، مثل نتایج جست‌وجو یا بایگانی.
  • تعداد کل صفحه‌ها برای کاربر معنا دارد و می‌خواهد مستقیم به صفحه‌ای برود.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای فهرست کوتاه که در یک صفحه جا می‌شود.
  • برای مراحل یک فرایند؛ مراحل جای دیگری نشان داده می‌شود.

قواعد

Section titled “قواعد”
  • «قبلی» سمت راست و «بعدی» سمت چپ است، چون خواندن از راست به چپ است؛ پیکان‌ها هم به همین سمت می‌روند.
  • شمارهٔ اول و آخر همیشه دیده می‌شود، و دو شماره دو طرف صفحهٔ فعلی. بقیه با «…» کوتاه می‌شود.
  • در صفحهٔ اول «قبلی» و در صفحهٔ آخر «بعدی» غیرفعال می‌شود، ولی از صفحه حذف نمی‌شود تا چیدمان جابه‌جا نشود.
  • شماره‌ها فارسی‌اند.

صفحهٔ اول

Section titled “صفحهٔ اول”
<nav aria-label="صفحه‌بندی">
  <ul class="hq-pagination">
    <li><span class="hq-pagination__item" aria-disabled="true" aria-label="صفحهٔ قبلی"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M22 16 12 26 10.6 24.6 19.2 16 10.6 7.4 12 6z"/></svg></span></li>
    <li><a class="hq-pagination__item" href="#" aria-current="page">۱</a></li>
    <li><a class="hq-pagination__item" href="#">۲</a></li>
    <li><a class="hq-pagination__item" href="#">۳</a></li>
    <li><a class="hq-pagination__item" href="#" aria-label="صفحهٔ بعدی"><svg class="hq-icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M10 16 20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"/></svg></a></li>
  </ul>
</nav>
انجام بده«قبلی» به راست و «بعدی» به چپ.
انجام ندهپیکان‌ها در جهت چپ‌به‌راست.