Source

Барактоо

Документация жана мисалдар бир нече беттерде тиешелүү мазмундун сериясы бар экенин көрсөтүү үчүн баракчаларды көрсөтүү үчүн.

Обзор

Биз баракчаларыбыз үчүн туташкан шилтемелердин чоң блогун колдонобуз, бул шилтемелерди өткөрүп жиберүүнү кыйындатат жана оңой масштабдалат — мунун баары чоң хит аймактарды камсыз кылат. Беттештирүү тизме 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Класс s шилтемесинин функционалдуулугун өчүрүүгө pointer-events: noneаракет кылып жатканда <a>, ал CSS касиети стандартташтырылган эмес жана клавиатурада навигацияны эсепке албайт. Ошентип, сиз ар дайым tabindex="-1"өчүрүлгөн шилтемелерди кошуп, алардын функцияларын толугу менен өчүрүү үчүн ыңгайлаштырылган JavaScriptти колдонушуңуз керек.

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