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. Komponentin renderToggle-propin kautta voi antaa sivun muun rakenteen mukaisen otsikkoelementin.

Rajoitukset

CollapseToggle-komponentille annettava painike tulee olla komponentin ainoa ja suora lapsielementti. Älä siis kääri painiketta Reactin Fragmentiin tai esim. divin sisälle. Tämä rikkoo painikkeelle lisättävät ARIA-attribuutit.

Esimerkki

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