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

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

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