Toast
Komponentti kelluvien tai push-tyyppisen ilmoitusten näyttämiseen.
Julkaistu versiossa 0.15.3
Esikatselu
Käyttötarkoitus
Toast-komponenttia voi käyttää käyttäjälle olennaisen tiedon ilmoittamiseen silloin, kun ilmoituksen ei haluta keskeyttävän tai häiritsevän käyttäjän työnkulkua.
Toast näytetään käyttäjälle vain kerran. Komponenttiin ei siksi pidä sisällyttää käyttäjän kannalta kriittisiä tietoja, jotka voivat vahingossa jäädä huomaamatta. Toastiin ei myöskään pidä liittää painikkeita, linkkejä tai muita komponentteja, jotka vaativat käyttäjältä toimenpiteitä.
Oletuksena Toast avautuu ja sulkeutuu käyttäjän toimista riippumatta.
Automaattinen sulkeutumistoiminto ei kuitenkaan vaikuta ilmoitukseen, jos käyttäjä vie kursorin ilmoituksen päälle. Kun kursori on ilmoituksen ulkopuolella, Toast sulkeutuu automaattisesti. Käyttäjä 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ä käyttäjä itse sulkee ilmoituksen.
Toast sopii hyvin esimerkiksi seuraaviin tilanteisiin:
- Käyttäjälle ilmoitetaan järjestelmän tilaan liittyvästä muutoksesta (esim. siirtyminen toisen puolesta asiointiin).
- Käyttäjälle ilmoitetaan ohimenevästä tilanteesta, joka ei vaadi käyttäjältä toimenpiteitä mutta joka saattaa silti kiinnostaa käyttäjää (esim. tietojen tallennuksen onnistuminen).
Tee näin
- Käytä Toast-komponenttia, kun ilmoituksen ei ole tarve keskeyttää käyttäjän 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 käyttäjä 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 käyttäjän 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 käyttäjä 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 käyttäjä 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 käyttäjän 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.