Постраничное разделение

pagination

В SIMAI Framework с помощью модификаторов можно костомизировать элементы форм при валидации

Описание

Ссылки постраничного разделения указывают на то, что существует ряд связанных между собой материалов на нескольких страницах. Обычно они используются там, где многостраничный подход к длинным спискам контента улучшает общую производительность, например, в результатах поиска.

Обзор

Мы используем большой блок подключаемых ссылок для нашего постраничного разделения, делая ссылки легко масштабируемыми - обеспечивая при этом большие площади попадания. Постраничное разделение построено со списком элементов HTML, поэтому скринридеры (программы чтения с экрана) могут объявить количество доступных ссылок. Используйте элемент <nav>, чтобы идентифицировать его как раздел навигации для скринридеров и других ассистивных технологий.

Кроме того, поскольку страницы, вероятно, имеют более одного такого раздела навигации, рекомендуется предоставить описательный aria-label для <nav>, чтобы отразить ее назначение. Например, если компонент постраничного разделения используется для навигации между набором результатов поиска, подходящей меткой может быть aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="flex list-none m-0 p-0 link-inherit">
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-left-1 border-right-1 radius-left-1/3" href="#">Предыдущий</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">2</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

Работа с иконками

Хотите использовать значок или символ вместо текста для ссылок на страницы? Обязательно обеспечьте надлежащую поддержку скринридера атрибутами aria и утилитой .sr-only.

<nav aria-label="Page navigation example">
  <ul class="flex list-none m-0 p-0 link-inherit">
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-left-1 border-right-1 radius-left-1/3" href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
        <span class="sr-only">Предыдущий</span>
      </a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="page-item">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
        <span class="sr-only">Следующий</span>
      </a>
    </li>
  </ul>
</nav>

Заблокированные и активные состояния

Ссылки постраничного разделения настраиваются для разных условий. Используйте .disabled для ссылок, которые отображаются без кликабельности и .active для обозначения текущей страницы.

В то время как класс .disabled использует pointer-events: none чтобы попытаться отключить функциональность ссылки <a>, это свойство CSS еще не стандартизировано и не учитывает навигацию по клавиатуре. Таким образом, вы всегда должны добавлять tabindex="-1" на отключенных ссылках и использовать пользовательский JavaScript, чтобы полностью отключить их функциональность.

<nav aria-label="...">
  <ul class="flex list-none m-0 p-0 link-inherit">
    <li class="color-on-surface">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 pointer-event-none cursoradius-1/3 border-surface-lowest bg-surface-3 border-left-1 border-right-1 radius-left-1/3" href="#" tabindex="-1">Предыдущий</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="color-on-surface-inverse">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 bg-error hover:bg-surface-0 color-inherit hover:color-on-surface border-error hover:border-surface-lowest" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

Дополнительно вы можете изменять активные или заблокированые якоря для <span> или пропустить привязку якоря в случае предыдущих/следующих стрелок, для удаления функциональности клика и предотвращения фокусировки клавиатуры при сохранении целевых стилей.

<nav aria-label="...">
  <ul class="flex list-none m-0 p-0 link-inherit">
    <li class="color-on-surface">
      <span class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 pointer-event-none cursoradius-1/3 border-surface-lowest bg-surface-3 border-left-1 border-right-1 radius-left-1/3">Предыдущий</span>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="color-on-surface-inverse">
      <span class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 bg-error hover:bg-surface-0 color-inherit hover:color-on-surface border-error hover:border-surface-lowest">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

Изменение размера

Есть потребность увеличить или уменьшить блок постраничного разделения? Добавьте .pagination-lg или .pagination-sm для изменения размеров.

<nav aria-label="...">
  <ul class="flex list-none m-0 p-0 link-inherit">
    <li class="color-on-surface">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-2 pointer-event-none cursoradius-1/3 border-surface-lowest bg-surface-3 border-left-1 border-right-1 radius-left-1/3" href="#" tabindex="-1">Предыдущий</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-2 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-2 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">2</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-2 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1 p-left-1 p-top-1/2 p-bottom-1/2 text-2 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="flex list-none m-0 p-0 link-inherit">
    <li class="color-on-surface">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/3 p-left-1/3 p-top-1/3 p-bottom-1/3 text-1/2 string-none pointer-event-none cursoradius-1/3 border-surface-lowest bg-surface-3 border-left-1 border-right-1 radius-left-1/3" href="#" tabindex="-1">Предыдущий</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/3 p-left-1/3 p-top-1/3 p-bottom-1/3 text-1/2 string-none hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/3 p-left-1/3 p-top-1/3 p-bottom-1/3 text-1/2 string-none hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">2</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/3 p-left-1/3 p-top-1/3 p-bottom-1/3 text-1/2 string-none hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/3 p-left-1/3 p-top-1/3 p-bottom-1/3 text-1/2 string-none hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

Выравнивание

Измените выравнивание компонентов постраничного разделения с помощью флексбокс утилит.

<nav aria-label="Page navigation example">
  <ul class="flex list-none m-0 p-0 link-inherit w-full content-start">
    <li class="color-on-surface">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 pointer-event-none cursoradius-1/3 border-surface-lowest bg-surface-3 border-left-1 border-right-1 radius-left-1/3" href="#" tabindex="-1">Предыдущий</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">2</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="flex list-none m-0 p-0 link-inherit w-full content-end">
    <li class="color-on-surface">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 pointer-event-none cursoradius-1/3 border-surface-lowest bg-surface-3 border-left-1 border-right-1 radius-left-1/3" href="#" tabindex="-1">Предыдущий</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">1</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">2</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest" href="#">3</a>
    </li>
    <li class="">
      <a class="border-top-1 border-right-1 border-bottom-1 underline-none center flex p-right-1/2 p-left-1/2 p-top-1/3 p-bottom-1/3 text-1 hover:bg-surface-3 bg-surface-0 color-on-surface transition border-surface-lowest border-right-1 radius-right-1/3" href="#">Следующий</a>
    </li>
  </ul>
</nav>

Адаптивность

Для установки адаптивности постраничной навигации, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью