Accordion

shadow

wje-accordion zoskupuje položky wje-accordion-item a koordinuje ich stav. Najväčší zmysel má vtedy, keď chcete viaceré rozbaľovacie sekcie so spoločnou logikou, napríklad režim jednej otvorenej položky alebo počiatočne otvorený item cez index.

Základné použitie

Ukážka nižšie ukazuje wje-accordion s jedným wje-accordion-item, aby bolo jasné, ako wrapper a položka spolupracujú. Headline nemusí byť len text; môžete doň vložiť aj stavové alebo akčné komponenty.

Farebné varianty položiek

Farebnosť sa nastavuje na jednotlivé wje-accordion-item, nie na samotný wrapper. V jednej skupine tak môžete kombinovať rôzne významové varianty podľa konkrétnej položky.

Viac otvorených položiek naraz

Ukážka demonštruje atribút multiple, pri ktorom otvorenie jednej položky nezatvára ostatné. Zároveň používa index, ktorý určuje počiatočne otvorený item podľa jeho poradia v DOMe.

Na čo sa oplatí myslieť

• Do wrappera vkladajte priame deti wje-accordion-item.
• Ak multiple nie je nastavené, otvorenie jednej položky zatvorí ostatné.
• wje-accordion je koordinačný wrapper; väčšina vizuálu, slotov a interakcie patrí wje-accordion-item.
• Host nastavuje role="presentation", takže prístupnosť interakcie riešia samotné položky.

Prístupnosť

• Dbajte na to, aby každá položka mala jednoznačný a zrozumiteľný obsah slotu headline.
• Ak do headline vkladáte ďalšie interaktívne prvky, otestujte si poradie focusu a klávesnicové správanie v reálnom rozložení.
• Ak je dôležité reagovať na otvorenie alebo zatvorenie položky v nadradenom kóde, počúvajte bubbling eventy z wje-accordion-item.

Odporúčané postupy

• Do jedného accordiona zoskupujte iba sekcie, ktoré spolu tematicky súvisia.
• Ak používate multiple, robte to vedome; pri dlhom obsahu sa stránka rýchlo „roztiahne“.
• Farebné varianty používajte na vyjadrenie významu položky, nie iba ako dekoráciu.

Atribúty a vlastnosti

index

Popis	Nastavuje index aktuálne aktívnej položky accordionu.
Atribút	index
Typ	number
Predvolené	0

multiple

Popis	Umožňuje mať rozbalených viac položiek accordionu naraz.
Atribút	multiple
Typ	boolean
Predvolené	false

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

collapseAll

Popis	Zatvorí všetky accordion položky okrem voliteľne zadanej výnimky.
Signatúra	(exception: any) => void

getAccordions

Popis	Vráti priame deti wje-accordion-item, ktoré accordion spravuje.
Signatúra	() => Array

CSS tieňové časti

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS vlastné premenné

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.