Accordion
Haitarielementti sisältöjen piilottamiseen. Soveltuu erityisesti listamaisen sisällön tiivistämiseen.
Julkaistu versiossa 1.2.0
HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta Käyttö ilman Reactia.
Esikatselu
Esimerkit
Haitarielementti leipätekstityylillä
Haitarielementti otsikkotyylillä
Haitarielementti kuvakkeella
Kevyt haitarielementti otsikkotyylillä
Kevyt haitarielementti linkkipainikkeen tyylillä
Useampi haitari linkkipainikkeen tyylillä
Korttimainen haitarielementti
CSS-luokat
| CSS-luokka | Arvot | Kuvaus |
|---|---|---|
kds-accordion |
Komponentin perusluokka | |
kds-accordion--borderless |
Kevyt haitari | |
kds-accordion--link |
Haitari linkkipainikkeen tyylillä | |
kds-accordion--card |
Haitari korttimaisella tyylillä | |
kds-accordion--open |
Avoin haitari | |
kds-accordion--reversed |
Painikkeen ikoni vasemmalla | |
kds-accordion--[size] |
xs,md |
Haitarin linkkityylisen painikkeen koko |
kds-accordion__title |
Haitarin otsikko (värjää avatun haitarin otsikon) | |
kds-accordion__toggle-heading |
Haitarin otsikkoelementti | |
kds-accordion__toggle |
Haitarin painike-elementti | |
kds-accordion__toggle--open |
Haitarin avoin painike | |
kds-accordion__toggle-icon |
Haitarin painikkeen ikoni | |
kds-accordion__toggle-title |
Haitarin painikeotsikko | |
kds-accordion__body |
Haitarin sisältö |