Loading...
Jak postupovat při repetitivním zanořování komponenty? Přečtete si předem Nesting obalových komponent
V hlavičce accordion panelu lze pro zobrazení dodatečných informací a nápovědy použít vlastnosti headerTooltip nebo headerPopover:
V hlavičce lze použít pouze jednu formu nápovědy — buď Tooltip (headerTooltip), nebo Popover (headerPopover). Nikdy nepoužívejte obě komponenty současně.
Vlastnost checkboxControlsAccordion určuje vazbu mezi zaškrtnutím checkboxu v hlavičce a rozbalením panelu:
true, výchozí): Označení checkboxu a rozbalení panelu probíhá současně. Vhodné pro scénáře, kde rozbalení detailu přímo znamená výběr položky (např. krok sjednání).false): Checkbox i rozbalení fungují samostatně. Kliknutí na plochu panelu pouze otevírá detail pro prohlížení a porovnání, aniž by došlo k automatickému zaškrtnutí checkboxu.Standardní accordion panel s hlavičkou, obsahem a možností rozbalení/sbalení.
Popis pod nadpisem a ikona před nadpisem pomáhají uživateli rozpoznat obsah panelu už ve sbaleném stavu.
Vlastnost defaultOpen určuje počáteční stav panelu. Uživatel ho poté může libovolně sbalit a rozbalit.
Odlehčená varianta s ohraničením, vhodná zejména pro vnořené panely.
Výraznější varianta s odlišným pozadím, která panel vizuálně odděluje od okolního obsahu.
U varianty contrast lze pomocí bColor nastavit vlastní odstíny pozadí. Odstín pro hover se nepočítá automaticky, je nutné ho zadat explicitně (base a hover).
Jednoduchá nápověda v hlavičce zobrazená po najetí myší.
Nápověda se složitějším obsahem zobrazená po kliknutí. Kliknutí na popover panel nerozbaluje.
Checkbox v hlavičce, jehož zaškrtnutí je ve výchozím stavu provázané s rozbalením panelu.
Při checkboxControlsAccordion={false} fungují checkbox a rozbalení panelu samostatně.
Kombinace checkboxu a popoveru v hlavičce. Kliknutí na popover nemění stav panelu ani checkboxu.
Checkbox nelze změnit, panel lze nadále rozbalovat a sbalovat.
Panel v režimu readOnly zobrazuje obsah i stav checkboxu, ale neumožňuje s nimi interagovat.
Zakázaný panel zůstává zavřený a nereaguje na uživatelskou interakci.
Obsahem panelu může být libovolná komponenta, například Literal pro zobrazení hodnot.
Accordion panel s notifikačním indikátorem.
Accordion panel s action zónou obsahující tlačítka nebo další interaktivní prvky pro rychlé akce související s obsahem panelu.
Kompaktní varianta accordion panelu s menšími rozměry, vhodná pro hustší rozhraní.
Aktivní stav accordion panelu, který vizuálně zvýrazňuje aktuálně vybraný nebo důležitý panel v seznamu.
Příklad hierarchické struktury, jak se accordion panely mohou vnořit do sebe pro komplexnější organizaci obsahu.
Stav otevření lze řídit zvenku pomocí vlastností open a onOpenChange, například z tlačítka mimo panel.
Řízením open lze docílit klasického chování akordeonu, kdy je v jednu chvíli otevřený nejvýše jeden panel.
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í.
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.