Přeskočit na hlavní obsah

Přepínače, dialogy a lišty seznamů

Přepínač (Switch)​

Switch je dvoustavový přepínač (zapnuto / vypnuto), který vypadá jako posuvné tlačítko.

  • Používá se například u publikace, viditelnosti nebo u feature přepínačů v editorech.
  • Ovládá se kliknutím celé plochy; stav je označený atributem přístupnosti aria-checked.
  • Existuje kompaktní varianta (sm) tam, kde je málo místa (např. husté tabulky).
Klávesnice

Přepínač je implementovaný jako <button> – po zaostření by měl reagovat na Mezerník nebo Enter stejně jako kliknutí (záleží na prohlížeči a fokusu stránky).

Modální dialogy (useDialog)​

Administrace používá jednotné asynchronní dialogy spravované kontextem (potvrzení, hláška, neuložené změny).

Potvrzení (confirm)​

  • Zobrazí zprávu a tlačítka typu Potvrdit / Zrušit.
  • Používá se před smazáním záznamu nebo jinou nevratnou akcí.
  • Volitelně lze nastavit variantu danger (červené zvýraznění) nebo vlastní texty tlačítek.

Hláška (alert)​

  • Jedno tlačítko OK – např. po úspěšném uložení nebo při chybě z API.

Neuložené změny (confirmUnsavedChanges)​

  • Nabídne například: Uložit, Odejít bez uložení, Zůstat.
  • Při pokusu opustit stránku s rozpracovaným formulářem chrání před ztrátou dat.
Overlay

Kliknutí mimo obsah modalu často zruší akci stejně jako tlačítko Zrušit – u destruktivních operací vždy čtěte text dialogu.

Lišta seznamu (AdminListToolbar)​

Horní panel nad dlouhými seznamy (stránky, uživatelé, události, …) typicky obsahuje:

  • Vyhledávání – okamžité nebo po krátké prodlevě filtruje řádky podle textu.
  • Filtr – tlačítko otevře panel s dalšími kritérii (datum, stav, typ… podle obrazovky). Aktivní filtry bývají zvýrazněné.
  • Počet – text ve stylu 12 / 45 (aktuální stránka / celkem nebo podobně dle modulu).

Varianta bez tlačítka Filtr se používá tam, kde stačí jen vyhledávání a počet (např. některé přehledy resource stringů).

Související vzory​

  • Ikony u řádků (tužka, koš, tři tečky) mají obvykle title / aria-label s popisem akce – najedete myší pro nápovědu.
  • Kebab menu shromažďuje méně časté akce, aby hlavní řádek zůstal čitelný.

Při školení nových uživatelů ukážte nejdřív lištu a dialogy – stejné vzory se opakují napříč celým CMS.