Panel je kontejner pro související obsah nebo funkce, který vizuálně odděluje určitou sekci od zbytku rozhraní.
Hlavička akordeonu, nadpis, popis a ikona
Notifikace
Tagy
Action zone
Close button
Obsah panelu
Použití
Kdy používáme
Pro logické seskupení obsahu
Pokud je potřeba mít část obsahu vizuálně oddělenou a snadno rozpoznatelnou.
V dashboardech a workspacech jako samostatné widgety/bloky.
Kdy nepoužíváme
Pokud obsah nepotřebuje oddělení (zbytečné zahlcení UI).
Pokud se jedná jen o krátký text
Pokud je cílem upoutat plnou pozornost uživatele → lepší Modal nebo Side Sheet
Varianty
Základní varianta
Standardní panel s hlavičkou a obsahem.
Live preview
Zvolit téma:
S notifikací
Panel s notifikačním indikátorem.
Live preview
Zvolit téma:
S action zónou
Panel s action zónou obsahující tlačítka nebo další interaktivní prvky pro rychlé akce související s obsahem panelu.
Live preview
Zvolit téma:
Kompaktní varianta
Kompaktní varianta panelu s menšími rozměry, vhodná pro hustší rozhraní.
Live preview
Zvolit téma:
Aktivní varianta
Aktivní stav panelu, který vizuálně zvýrazňuje aktuálně vybraný nebo důležitý panel v seznamu.
Live preview
Zvolit téma:
Chování
Vnořené panely
Příklad hierarchické struktury, kde panely mohou obsahovat další vnořené panely pro komplexnější organizaci obsahu.
Live preview
Zvolit téma:
Zamčená varianta
Zamčený panel. Používá se pro obsah, který je momentálně nedostupný nebo vyžaduje speciální oprávnění.
Live preview
Zvolit téma:
Responsivita
Panel se automaticky přizpůsobují různým velikostem obrazovky. Na menších zařízeních se upravuje rozložení a velikost prvků pro optimální použitelnost.
