1. Komponenty

Seznam položek

angl. Item List

Jedná se o výpis jednotlivých položek vč. doplňujících informací.

Prostý výpis položek


<div class="m-2">
    <div class="navigation navigation--subpage navigation--level4-5">
        <h3 class="navigation__title">Notifikace</h3>
        <ul class="nav nav--vertical">
            <li class="nav__item">
                <a href="#" class="nav__link">Notifikace e-mailem</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">SMS notifikace</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Notifikace systémovou zprávou</a>
            </li>
        </ul>
    </div>
</div>

Příkladem je výpis datových zpráv


<div class="m-2">
    <div class="navigation navigation--subpage navigation--level4-5">
        <h3 class="navigation__title">
            PŘIJATÉ ZPRÁVY
            <button type="button" class="btn btn-secondary filter__button">
                <span class="pvs-theme-icon-filter"></span>
                Filtr
            </button>
        </h3>
        <ul class="nav nav--vertical">
            <li class="nav__item">
                <a href="#" class="nav__link">
                    <span class="clearfix smaller">
                        <span class="float-left">MINISTERSTVO VNITRA ČR</span>
                        <span class="float-right mb-1">Dodáno</span>
                    </span>
                    <span class="clearfix">
                        <span class="float-left font-weight-bold">Neveřejný výpis údajů podnikající fyzické osoby z registru osob</span>
                        <span class="float-right smaller mt-1"></span>
                    </span>
                </a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">
                    <span class="clearfix smaller">
                        <span class="float-left">SYSTÉMOVÁ SCHRÁNKA PROVOZOVATELE ISDS</span>
                        <span class="float-right mb-1">Doručeno dnes 14.22</span>
                    </span>
                    <span class="clearfix">
                        <span class="float-left font-weight-bold">Žádost o výpis a využití údajů z registru osob</span>
                        <span class="float-right smaller mt-1"></span>
                    </span>
                </a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">
                    <span class="clearfix smaller">
                        <span class="float-left">SYSTÉMOVÁ SCHRÁNKA PROVOZOVATELE ISDS</span>
                        <span class="float-right mb-1">Doručeno 17. 9. 2017</span>
                    </span>
                    <span class="clearfix">
                        <span class="float-left">Žádost o výpis a využití údajů z registru osob</span>
                        <span class="float-right smaller mt-1">26 dnů do smazání</span>
                    </span>
                </a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">
                    <span class="clearfix smaller">
                        <span class="float-left">SYSTÉMOVÁ SCHRÁNKA PROVOZOVATELE ISDS</span>
                        <span class="float-right mb-1">Doručeno 11. 8. 2017</span>
                    </span>
                    <span class="clearfix">
                        <span class="float-left">Základní informace k Vaší datové schránce</span>
                        <span class="float-right smaller mt-1">2 dny do smazání</span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech). Více o typech zařízení najdete na stránce Mřížka.

Při zobrazení na menším zařízení dojde k případnému zalomení delšího textu položky do více řádků.

Použití

Výpis používejte tam, kde chcete uživateli umožnit rychlý náhled položek se základními informacemi a možností rozkliknout detail.

  • Jde o navigační prvek obsahující jednotlivé položky, které se otevřou po rozkliknutí
  • Položky mohou obsahovat název, popis a další parametry
  • Klikatelná je vždy celá plocha jednotlivé položky

Příklady použití

Použití se může v jednotlivých případech značně lišit podle obsahu, který zobrazujeme.

Výpis zpráv v datové schránce

Ukázka použití přehledu naplněného velkým množstvím informací:

Výpis zpráv - ukázka

Nastavení datové schránky

Ukázka použití přehledu obsahujícího pouze jednu základní informaci:

Nastavení - ukázka

Popis jednotlivých prvků

Seznam položek může obsahovat následující prvky:

Popis prvků seznamu

Globální prvky

Nadpis přehledu

Používejte tam, kde dává smysl přehled jako celek konkrétně pojmenovat

  • Vhodné je použití nadpisu <H4>
  • Měl by být krátký a výstižný

Odkaz/tlačítko s akcí

  • Může otevřít filtr nebo vyhledávání
  • Je vhodné používat pro seznamy s více než 25 položkami

Scrollování/stránkování

U seznamů s více než 25 položkami je možné postupné zobrazování položek řešit několika způsoby:

  • Nekonečné scrollování - vhodné především pro mobilní zobrazení
  • Zobrazení dalších položek po stisku tlačítka - pro zobrazení dalších položek využívejte tlačítko typu Primary Outline - komponenta Tlačítko
  • Stránkování - vhodné pro použití velmi dlouhých seznamů především na desktopu - komponenta Stránkování

Položky seznamu

Název položky

Je povinným prvkem každé položky (používejte třídu p perex případně zvýrazněnou tagy <strong></strong>)

Klikatelná plocha

Klikatelná je celá plocha položky.

Ikony

Mohou označovat specifické prvky seznamu s určitými vlastnostmi (např. nepřečtená datová zpráva).

Podrobnější informace

Umístění dalších informací závisí na konkrétních datech, které se vztahují k jednomu prvku seznamu (používejte třídu p smaller)

Užitečné odkazy

Rozcestník