1. Komponenty

Stránkování

angl. Pagination

Slouží k rozdělení obsahu nebo dat na několik stránek s navigací na další nebo předchozí stránku.



<div class="col-12">
    <div class="paginator__holder">
        <div class="paginator">
            <ul class="paginator__list">
                <li class="paginator__item pl-0">
                    <span class="paginator__link paginator__link--disabled">
                        <span class="paginator__arrow pvs-theme-icon-arrow-left"></span>
                    </span>
                </li>
                <li class="paginator__item">
                    <span class="paginator__link active">1</span>
                </li>
                <li class="paginator__item">
                    <a href="#" class="paginator__link">2</a>
                </li>
                <li class="paginator__item">
                    <a href="#" class="paginator__link">3</a>
                </li>
                <li class="paginator__item">
                    …
                </li>
                <li class="paginator__item">
                    <a href="#" class="paginator__link">8</a>
                </li>
                <li class="paginator__item pr-0">
                    <a href="#" class="paginator__link">
                        <span class="paginator__arrow pvs-theme-icon-arrow-right"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

Stránkování použijte tam, kde se vyskytuje velké množství dat a rozdělením obsahu usnadníte uživateli orientaci. Stránkování použijte na všech stránkách, kde zobrazujete výsledky vyhledávání nebo u rejstříku orgánů veřejné moci (OVM), jejichž počet je vyšší než 25.

Zobrazování výsledků

Pokud je počet výsledků vyšší než 25, je ideální použít stránkování. Dejte uživateli možnost měnit si počet zobrazovaných výsledků na stránce (25, 50, 75, 100). Počet výsledků na stránce vždy záleží na celém kontextu použití.

Číslo stránky 20 výsledků na stránku 40 výsledků na stránku 60 výsledků na stránku 80 výsledků na stránku 100 výsledků na stránku
1 1 - 20 1 - 40 1 - 60 1 - 80 1 - 100
2 21 - 40 41 - 80 61 - 120 81 - 160 101 - 200
3 41 - 60 121 - 160 121 - 180 161 - 240 201 - 300
4 61 - 80 161 - 200 181 - 240 241 - 320 301 - 400
5 81 - 100 201 - 240 241 - 300 321 - 400 401 - 500

Obecná pravidla

Pomožte uživateli udělat si celkový přehled o zobrazených datech.

  • Jasně označujte stránku, na které se uživatel nachází
  • Poskytněte celý kontext - zobrazujte celkový počet stránek