Toast
Komponentti kelluvien tai push-tyyppisen ilmoitusten näyttämiseen.
Julkaistu versiossa 0.15.3
Esikatselu
Käyttötarkoitus
Toast-komponenttia voi käyttää asiakkaalle olennaisen tiedon ilmoittamiseen silloin, kun ilmoituksen ei haluta keskeyttävän tai häiritsevän asiakkaan työnkulkua.
Toast näytetään asiakkaalle vain kerran. Komponenttiin ei siksi pidä sisällyttää asiakkaan kannalta kriittisiä tietoja, jotka voivat vahingossa jäädä huomaamatta. Toastiin ei myöskään pidä liittää painikkeita, linkkejä tai muita komponentteja, jotka vaativat asiakkaalta toimenpiteitä.
Oletuksena Toast avautuu ja sulkeutuu asiakkaan toimista riippumatta.
Automaattinen sulkeutumistoiminto ei kuitenkaan vaikuta ilmoitukseen, jos asiakas vie kursorin ilmoituksen päälle. Kun kursori on ilmoituksen ulkopuolella, Toast sulkeutuu automaattisesti. Asiakas voi myös itse sulkea ilmoituksen ruksia klikkaamalla.
Tarvittaessa Toastia voi soveltaa myös ilman automaattista sulkeutumistoimintoa. Tällöin Toast kelluu sisältöjen päällä siihen asti, että asiakas itse sulkee ilmoituksen.
Toast sopii hyvin esimerkiksi seuraaviin tilanteisiin:
- Asiakkaalle ilmoitetaan järjestelmän tilaan liittyvästä muutoksesta (esim. siirtyminen toisen puolesta asiointiin).
- Asiakkaalle ilmoitetaan ohimenevästä tilanteesta, joka ei vaadi asiakkaalta toimenpiteitä mutta joka saattaa silti kiinnostaa asiakasta (esim. tietojen tallennuksen onnistuminen).
Tee näin
- Käytä Toast-komponenttia, kun ilmoituksen ei ole tarve keskeyttää asiakkaan työnkulkua.
- Käytä Toast-komponenttia, kun ilmoitat järjestelmän tilaan liittyvästä asiasta (esim. asioit toisen puolesta)
- Kirjoita ilmoitusteksti kuvaavasti mutta napakasti.
- Pidä Toast näkyvillä riittävän pitkään, jotta asiakas ehtii lukea kaiken siinä olevan tekstin.
Älä tee näin
- Älä käytä Toast-komponenttia ilmoittamaan virheistä tai muista kriittisistä asioista. Käytä tällöin Alert- tai Modal-komponenttia.
- Älä käytä Toastia vain varmuuden vuoksi, vaan ainoastaan perustellusta syystä.
- Älä sijoita Toastiin painikkeita, linkkejä tai muita klikattavia elementtejä.
Saavutettavuus
Kun Toast avautuu, ruudunlukija lukee sen automaattisesti. Kohdistus ei kuitenkaan siirry komponentin sisältöön, jolloin asiakkaan on helppo jatkaa muuhun sisältöön Toastin lukemisen jälkeen.
Älä sijoita Toastiin painikkeita, linkkejä tai muita komponentteja, jotka vaativat kohdistuksen siirtämisen Toastiin.
Muotoile tekstit lyhyiksi ja selkeiksi, jotta asiakas ehtii lukea ne ennen Toastin sulkeutumista. Pidä ilmoitus myös esillä riittävän pitkään.
Toast-ilmoitusten saavutettava toteutus perustuu kahteen eri komponenttiin.
Toast, eli itse ilmoitus, sisältää role="alert" -attribuutin, joka saa ruudunlukijat lukemaan ilmoituksen
automaattisesti, kun se ilmestyy näytölle.
Esimerkit
Oletuksena Toast on näkyvissä 15 sekuntia, jonka jälkeen se sulkeutuu itsestään. Aikaa voi muuttaa autoHideDuration-propilla. Tarvittaessa Toastin voi asettaa suljettavaksi vain ruksista. Huomioi, että tällöin Toast kelluu muiden elementtien päällä niin kauan, kunnes asiakas sulkee sen.
Ilmoitustyypit
Toast-ilmoituksesta on tarjolla kaksi erilaista ilmoitustyyppiä:
- Sininen, neutraali ilmoitus.
- Vihreä, onnistumista kuvaava ilmoitus.
Toastista ei ole tarjolla punaista eikä keltaista versiota, sillä virheilmoituksia tai muuta kriittistä tietoa ei tule sijoittaa Toastiin. Käytä tällöin mieluummin Alert- tai Modal-komponenttia.
Suljettava ilmoitus
Ilmoitus sisältötekstillä
Ilmoitusten asemointi
Oletuksena Toast asemoidaan oikeaan yläkulmaan. Tällöin isolla näytöllä Toast ei peitä näytön keskeisiä elementtejä.
Toastin voi tarvittaessa asemoida myös näytön alalaitaan keskelle. Tätä asemointia kannattaa käyttää, jos Toast liittyy asiakkaan meneillään olevaan prosessiin.
Ilmoituksen toteuttava Toast-komponentti ei vaikuta ilmoitusten asetteluun, vaan ne tulee asetella erikseen
ToastContainer-komponentin avulla.
Jos haluat nähdä ilmoitusten järjestyksen muutokset animoituna, anna Toast-komponenteille uniikki data-toast-id-attribuutti.