Source

Faqezim

Dokumentacioni dhe shembujt për shfaqjen e faqeve për të treguar një seri përmbajtjesh të lidhura ekzistojnë në shumë faqe.

Vështrim i përgjithshëm

Ne përdorim një bllok të madh lidhjesh të lidhura për faqet tona, duke i bërë lidhjet të vështira për t'u humbur dhe lehtësisht të shkallëzueshme - të gjitha duke ofruar zona të mëdha të goditura. Pagimi është ndërtuar me elemente të listës HTML në mënyrë që lexuesit e ekranit të mund të shpallin numrin e lidhjeve të disponueshme. Përdorni një <nav>element mbështjellës për ta identifikuar atë si një seksion navigimi për lexuesit e ekranit dhe teknologji të tjera ndihmëse.

Përveç kësaj, duke qenë se faqet ka të ngjarë të kenë më shumë se një seksion të tillë navigimi, është e këshillueshme që të jepet një përshkrues aria-labelpër <nav>të pasqyruar qëllimin e tij. Për shembull, nëse komponenti i faqezimit përdoret për të lundruar midis një grupi rezultatesh kërkimi, një etiketë e përshtatshme mund të jetë 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>

Puna me ikona

Po kërkoni të përdorni një ikonë ose simbol në vend të tekstit për disa lidhje faqeshimi? Sigurohuni që të siguroni mbështetjen e duhur të lexuesit të ekranit me ariaatributet dhe mjetet .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>

Gjendjet me aftësi të kufizuara dhe aktive

Lidhjet e faqes janë të personalizueshme për rrethana të ndryshme. Përdoreni .disabledpër lidhjet që duken të pa-klikuar dhe .activepër të treguar faqen aktuale.

Ndërsa .disabledklasa përdor pointer-events: nonepër të provuar të çaktivizojë funksionalitetin e lidhjes së <a>s, ajo pronë CSS nuk është ende e standardizuar dhe nuk merr parasysh navigimin e tastierës. Si i tillë, gjithmonë duhet të shtoni tabindex="-1"lidhje të çaktivizuara dhe të përdorni JavaScript të personalizuar për të çaktivizuar plotësisht funksionalitetin e tyre.

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

Mund të ndërroni opsionalisht ankorat aktive ose të çaktivizuara për <span>, ose të hiqni ankorimin në rastin e shigjetave të mëparshme/tjetrës, për të hequr funksionalitetin e klikimeve dhe për të parandaluar fokusimin e tastierës duke ruajtur stilet e synuara.

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

Përmasat

Dëshironi faqezim më të madh apo më të vogël? Shtoni .pagination-lgose .pagination-smpër madhësi shtesë.

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

Radhitje

Ndryshoni shtrirjen e komponentëve të faqezimit me shërbimet e 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>