דִפּוּף

תיעוד ודוגמאות להצגת עימוד כדי לציין סדרה של תוכן קשור קיים על פני מספר דפים.

סקירה כללית

אנו משתמשים בגוש גדול של קישורים מחוברים לעימוד שלנו, מה שהופך קישורים לקשים לפספס וניתנים להרחבה בקלות - כל זאת תוך מתן אזורי פגיעה גדולים. עימוד בנוי עם רכיבי HTML רשימה כך שקוראי מסך יכולים להכריז על מספר הקישורים הזמינים. השתמש ברכיב עטיפה <nav>כדי לזהות אותו כמדור ניווט לקוראי מסך וטכנולוגיות מסייעות אחרות.

בנוסף, מכיוון שסביר להניח שבדפים יש יותר מקטע ניווט אחד כזה, מומלץ לספק תיאור aria-labelכדי <nav>לשקף את מטרתו. לדוגמה, אם נעשה שימוש ברכיב העימוד כדי לנווט בין קבוצה של תוצאות חיפוש, תווית מתאימה יכולה להיות aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

עבודה עם אייקונים

מעוניין להשתמש בסמל או בסמל במקום טקסט עבור כמה קישורי עימוד? הקפד לספק תמיכה נאותה בקורא מסך עם ariaתכונות וכלי .sr-onlyהשירות.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

מצבים נכים ופעילים

קישורי עימוד ניתנים להתאמה אישית לנסיבות שונות. השתמש .disabledעבור קישורים שנראים בלתי ניתנים ללחיצה .activeוכדי לציין את הדף הנוכחי.

בעוד .disabledשהמחלקה נוהגת לנסותpointer-events: none להשבית את פונקציונליות הקישור של s, מאפיין ה-CSS הזה עדיין לא סטנדרטי ואינו מתייחס לניווט במקלדת. ככזה, עליך תמיד להוסיף קישורים מושבתים ולהשתמש ב-JavaScript מותאם אישית כדי להשבית לחלוטין את הפונקציונליות שלהם.<a>tabindex="-1"

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

אתה יכול לחלופין להחליף עוגנים פעילים או מושבתים עבור <span>, או להשמיט את העוגן במקרה של החצים הקודם/הבא, כדי להסיר את פונקציונליות הלחיצה ולמנוע מיקוד במקלדת תוך שמירה על הסגנונות המיועדים.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

גודל

רוצה עימוד גדול או קטן יותר? הוסף .pagination-lgאו .pagination-smלגדלים נוספים.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

יישור

שנה את היישור של רכיבי עימוד עם כלי עזר flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>