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>