Collapse

Esikatselu

Käyttötarkoitus

Komponenttia käytetään helpottamaan laajojen sisältökokonaisuuksien silmäiltävyyttä ja piilottamaan toissijaista tietoa kunnes käyttäjä itse avaa sen. Komponentti itsessään ei renderöi mitään näkyviä käyttöliittymäkomponentteja, vaan tätä tulee soveltaa yhdessä muiden komponenttien kanssa.

Käytä valmista Accordion-komponenttia aina, kun se on mahdollista.

Collapse-komponentti koostuu seuraavista komponenteista:

• Collapse - Container-komponentti.
• CollapseToggle - Otsikkokomponentti, jonka sisältö näytetään aina.
• CollapseBody - Näytettävä / piilotettava sisältö.

Saavutettavuus

Komponentti lisää automaattisesti tarvittavat ARIA-attribuutit ruudunlukijoille.

Rajoitukset

CollapseToggle-komponentille annettava painike tulee olla komponentin ainoa ja suora lapsi. Älä siis kääri painiketta Reactin Fragmentiin tai esim. divin sisälle. Tämä rikkoo painikkeelle tarvittavat aria-attribuutit.

Esimerkki

Huomaathan, että esimerkin mukaisen elementin voi toteuttaa myös Accordion-komponentilla (kevyt haitarielementti linkkipainikkeen tyylillä).