Siirry sisältöön

Alert

Komponentti ilmoitusten esittämiseen.

Julkaistu versiossa 0.15.3

HTML

Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta Käyttö ilman Reactia.

Esikatselu

Esimerkit

Ilmoitustyypit

Ilmoituksen koko

Laajennettava ilmoitus

Suljettava ilmoitus

Taustavärin ja ikonin sijainnin muokkaaminen

Koko näytön levyisten ilmoitusten näyttäminen

CSS-luokat

CSS-luokkaArvotKuvaus
kds-alertIlmoituksen perusluokka
kds-alert--collapsibleLaajennettava ilmoitus
kds-alert--containerContaineria hyödyntävä ilmoitus
kds-alert--dismissibleSuljettava ilmoitus
kds-alert--flushIlmoitus taustavärillä ilman reunaviivoja
kds-alert--icon-[position]left, top, autoIlmoituksen ikonin sijainti
kds-alert--[size]sm, md, lgIlmoituksen koko
kds-alert--text-onlyIlmoitus pelkällä kuvakkeella ja tekstillä
kds-alert--[variant]primary, warning, danger, success, lightIlmoituksen väri
kds-alert__closeSuljettavan ilmoituksen painike
kds-alert__collapse-btnLaajennettavan ilmoituksen painike
kds-alert__collapse-btn--containerContaineria hyödyntävä painike
kds-alert__collapse-btn-toggleLaajennettavan ilmoituksen painikkeen toggle-elementti
kds-alert__collapse-titleLaajennettavan ilmoituksen otsikko
kds-alert__contentIlmoituksen sisältö
kds-alert__content--containerContaineria hyödyntävä sisältöelementti
kds-alert__iconIlmoituksen ikoni