Skip to main content

Accordion

shadow

Element Accordion umožňuje zobraziť obsah v rozbaľovacích sekciách. Každá sekcia môže byť rozbalená alebo zbalená kliknutím, čo umožňuje používateľom rýchlo nájsť a zobraziť požadované informácie. Komponent podporuje viacnásobný výber, čo znamená, že môže byť naraz rozbalených viacero sekcií. Okrem toho umožňuje nastaviť počiatočný index rozbalenej sekcie, čo poskytuje flexibilitu pri inicializácii komponentu s predvoleným rozbaleným obsahom.

Základné použitie

Farby

Multiple

Kedy použiť

Použite wje-accordion, keď chcete riešiť daný UI problém konzistentne v rámci WebJET dizajn systému.

Kedy nepoužiť

Nepoužívajte komponent mimo jeho zodpovednosti; pri netypickom prípade radšej zložte viac menších prvkov.

Prístupnosť

Skontrolujte klávesnicové ovládanie, focus stavy, kontrast a zrozumiteľné pomenovanie interaktívnych prvkov.

Odporúčané postupy

  • Preferujte API komponentu pred ručnými DOM zásahmi.
  • Držte sa dizajnových tokenov a konzistentných konvencií pomenovania.
  • Pred nasadením otestujte komponent v reálnych dátových scenároch.

Atribúty a vlastnosti

multiple

PopisUmožňuje mať rozbalených viac položiek accordionu naraz.
Atribútmultiple
Typboolean
Predvolené-

index

PopisNastavuje index aktuálne aktívnej položky accordionu.
Atribútindex
Typnumber
Predvolené-

disabled

PopisVypína používateľskú interakciu s accordion položkami.
Atribútdisabled
Typboolean
Predvolené-

expanded

PopisUrčuje, či je accordion položka rozbalená.
Atribútexpanded
Typboolean
Predvolené-

Udalosti

NázovPopis
wje-accordion-item:openVyvolá sa pri otvorení komponentu.

Metódy

collapseAll

PopisSpustí metódu collapseAll na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra(exception: any) => void

getAccordions

PopisVráti accordions z aktuálneho stavu komponentu.
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ázovPopis
defaultPredvolený slot pre hlavný obsah komponentu.