Accordion Panel

Otevřít ve Figmě

Accordion panel je sbalitelná/rozbalitelná sekce obsahu, která umožňuje uživateli zobrazit nebo skrýt dodatečné informace.

Klávesnice

Ukázka Accordionpanel – Accordionpanel Ovr

Checkbox
Hlavička akordeonu, nadpis, popis a ikona
Notifikace
Tagy
Action zone
Chevron pro zavřenní/otevření akordeonu
Obsah akordeonu

Jak postupovat při repetitivním zanořování komponenty? Přečtete si předem Nesting obalových komponent

Použití

Kdy používáme

Pro dlouhý obsah rozdělený do sekcí
Pokud je důležité šetřit místem v rozhraní.
Pokud obsah není potřeba vidět celý najednou.

Kdy nepoužíváme

Pokud uživatel potřebuje vidět celý obsah současně (pak raději tabs nebo klasický layout).
Pro kritické akce nebo informace, které by mohly být přehlédnuty ve sbaleném stavu.
Příliš vnořené akordeony (snižují přehlednost).

Varianty

Základní varianta

Standardní accordion panel s hlavičkou, obsahem a možností rozbalení/sbalení.

S notifikací

Accordion panel s notifikačním indikátorem.

S action zónou

Accordion panel s action zónou obsahující tlačítka nebo další interaktivní prvky pro rychlé akce související s obsahem panelu.

Kompaktní varianta

Kompaktní varianta accordion panelu s menšími rozměry, vhodná pro hustší rozhraní.

Aktivní varianta

Aktivní stav accordion panelu, který vizuálně zvýrazňuje aktuálně vybraný nebo důležitý panel v seznamu.

Chování

Vnořené akordeony

Příklad hierarchické struktury, jak se accordion panely mohou vnořit do sebe pro komplexnější organizaci obsahu.

Zamčená varianta

Zamčený accordion panel, který nelze rozbalit nebo upravit. Používá se pro obsah, který je momentálně nedostupný nebo vyžaduje speciální oprávnění.

Responsivita

Accordion panely 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.