Stronicowanie(ang. Pagination)

W zależności od umiejscowienia w hierarchii informacji wyróżniamy:

– Podstawowy komponent stronicowania
– Szybkie przejście do strony
– Liczba elementów na stronie

Podstawowy komponent stronicowania(ang. Simple Pagination)

Pozwala na zorientowanie się w liczbie stron i przechodzenie do kolejnych stron lub powrót do poprzednich. To komponent obowiązkowy.

<nav class="pagination" aria-label="pagination">
    <ul class="pagination__list">
      <li class="pagination_list-item">
        <a href="#" class="link-button link-button--left-icon page-link">
          <i aria-hidden="true" class="mdi icon mdi-arrow-left"></i>
          <span class="button__label">Poprzednia</span>
        </a> 
      </li>
      <li class="pagination_list-item"><a class="page-link" href="#">1</a></li>
      <li class="pagination_list-item"><a class="page-link" href="#">2</a></li>
      <li class="pagination_list-item"><a class="page-link page-link--active" href="#">3</a></li>
      <li class="pagination_list-item"><a class="page-link" href="#">...</a></li>
      <li class="pagination_list-item"><a class="page-link" href="#">98</a></li>
      <li class="pagination_list-item"><a class="page-link" href="#">99</a></li>
      <li class="pagination_list-item">
        <a href="#" class="link-button link-button--right-icon page-link">
          <span class="button__label">Następna</span>
          <i aria-hidden="true" class="mdi icon mdi-arrow-right"></i>
        </a> 
      </li>
    </ul>
    </nav>

1. Numer strony

   Numery stron to klikalne linki. Wyjątkiem jest strona, na której aktualnie znajduje się użytkownik, która nie jest klikalna i jest zaznaczona na czerwono.

2. Wykropkowanie (obowiązkowe w przypadku większej liczby stron)

   Nie jest klikalne. Pojawia się w przypadku dużej liczby stron, które nie mieszczą się na ekranie. Użytkownik zawsze powinien mieć możliwość nawigacji do przynajmniej dwóch stron do przodu i jednej do tyłu przy użyciu numerów stron a także możliwość przejścia do dwóch pierwszych i dwóch ostatnich stron. Gdy użytkownik znajduje się na jednej ze środkowych stron, widoczne powinny być dwa znaczniki wykropkowania.

3. Link do poprzedniej strony

   Jest to przycisk-link. Jeśli użytkownik znajduje się na pierwszej stronie, przycisk “Poprzednia” jest ukryty i nieaktywny.

4. Link do następnej strony

   Jest to przycisk-link. Jeśli użytkownik znajduje się na ostatniej stronie, przycisk “Następna” jest ukryty i nieaktywny.

Kilkalne są wszystkie elementy z wyjątkiem numeru aktualnej strony i wykropkowania.

Zasady stosowania

Szybkie przejście do strony(ang. Jump-to-Page)

Pozwala na szybkie przejście do jednej ze stron. Jest to komponent opcjonalny. Może być stosowany obok komponentu liczba elementów na stronie, ale nie jest to obowiązkowe.

  <section class="section__input input--navigation">
	<label class="input__label" for="input-3"> Przejdź do strony </label>
	<input id="input-3" type="text" placeholder="1" />
</section>

<section class="section__input input--navigation">
	<label class="input__label" for="input-4"> Przejdź do strony </label>
	<input class="input__has-error" id="input-4" type="text" placeholder="1" />
</section>

  

1. Etykieta

   Element nieklikalny. Treść etykiety jest stała.

2. Pole

   Element interaktywny. Użytkownik wpisuje w nim numer strony, do której chce przejść. Gdy wpisany zostanie numer strony, która nie istnieje, użytkownik pozostaje na dotychczasowej stronie, a obramowanie pola zmienia się na czerwone komunikując błąd.

Klikalne jest tylko pole.

Zasady stosowania

Liczba elementów na stronie

Umożliwia sterowanie liczbą elementów zbioru treści wyświetlanych na jednej stronie. Jest to komponent opcjonalny. Może być stosowany obok komponentu szybkie przejście do strony.

  <section class="section__nav-container">
  <div class="section__input input--select-navigation">
    <label class="input__label" for="input-5">Pokaż</label>
    <input
      aria-expanded="false"
      class="dropDownF"
      id="input-5"
      type="text"
      value="3"
    />
    <i
      aria-hidden="true"
      class="select__icon mdi icon icon--small mdi-chevron-down dropDownF"
    ></i>

    <ul class="drop-down__container drop-down__container--hide">
      <li tabindex="0" class="drop-down__item">1</li>
      <li tabindex="0" class="drop-down__item">2</li>
      <li tabindex="0" class="drop-down__item">3</li>
    </ul>
  </div>
  <span class="input__label--span" for="input-4">elementów na stronie </span>
</section>

  

1. Etykieta

   Element nieklikalny. Treść etykiety jest stała.

2. Lista rozwijana

   Element interaktywny. Użytkownik wybiera na nim jedną z predefiniowanych opcji.

Klikalna jest jedynie lista rozwijana