Modal (Dialogi)
Dialogi on modaalinen komponentti, jolla voidaan esittää käyttäjälle olennaista tietoa muun sisällön päällä, samalla muu sisältö piilottaen. Dialogia voidaan käyttää esimerkiksi ilmoitusten näyttämiseen, toimintojen suorittamiseen poistumatta nykyisestä näkymästä tai toimintojen varmistamiseen. Dialogi peittää nykyisen näkymän ja lukitsee fokuksen dialogin näkymän sisään. Kun toiminto on saatu suoritettua tai mikäli käyttäjä peruuttaa toiminnon, dialogi sulkeutuu ja palataan alkuperäiseen näkymään.
Saavutettavuus ja käytettävyys
- Dialogin kanssa tulee aina käyttää otsaketta (ModalTitle). Suomi.fi Design Systemin komponenttiin otsake kuuluu pakollisena osana.
- Dialogin alatunnisteen tulee aina sisältää toimintopainike jolla dialogi voidaan sulkea.
- Dialogin ulkopuolella olevat sisällöt piilotetaan ruudunlukijoilta.
- Fokus siirretään oletuksena dialogin otsakkeeseen dialogin avaamisen yhteydessä.
- Fokus lukitaan dialogin sisään, eivätkä dialogin ulkopuolella olevat sisällöt ole fokusoitavissa.
- Dialogin sulkemisen yhteydessä fokus palautetaan samaan elementtiin missä se oli ennen dialogin avaamista.
- Dialogia käytetään tilanteissa joissa halutaan kiinnittää käyttäjän huomio vain tiettyyn asiaan tai toiminnallisuuteen.
Mistä komponentti koostuu
Dialogi koostuu otsakkeesta, sisältöalueesta ja alatunnisteesta sekä taustalle jäävät elementit visuaalisesti himmentävästä peitteestä. Otsake sijaitsee dialogin yläreunassa ja toimii osana dialogin sisältöä. Otsake saa fokuksen dialogin avaamisen yhteydessä. Sisältöalueelle voidaan sijoittaa mitä tahansa sisältöä, pois lukien uudet dialogit. Alatunnisteen tulee aina sisältää painike millä dialogi sulkeutuu. Alatunniste voi lisäksi sisältää mahdollisia toissijaisia painikkeita esimerkiksi toiminnon peruuttamista varten.
Koko ja käyttö
Dialogia voidaan käyttää joko pienempikokoisena varmistusdialogina tai laajempia kokonaisuuksia tukevana dialogina (oletus). Dialogi tukee sekä pieniä näyttöjä että työpöytäkäyttöä. Pienillä näytöillä dialogi täyttää aina koko näytön. Työpöytäkäytössä dialogin maksimikorkeus on aina 50 pikseliä vähemmän kuin näytön korkeus.
Varmistusdialogi
Ilmoitusten näyttämiseen ja toimintojen varmistamiseen käytetään varmistusdialogia. Varmistusdialogi keskeyttää käyttäjän toiminnan ja pyytää varmistuksen meneillään olevalle toiminnolle tai ilmoitukselle. Esimerkiksi ennen kohteen poistamista käyttäjältä varmistetaan, että hän todella haluaa poistaa valitsemansa kohteen. Varmistusdialogin oletusleveys on työpöytäkäytössä 540 pikseliä ja minimikorkeus 190 pikseliä. Työpöytäkäytössä varmistusdialogin korkeus kasvaa sisällön mukana, mutta varmistusdialogi ei tue vieritystä (scrolling). Varmistusdialogia tulee käyttää vain lyhyiden sisältöjen esittämiseen.
Täysikokokoinen dialogi
Kun halutaan suorittaa laajempia toimintoja poistumatta nykyisestä näkymästä, voidaan käyttää täysikokoista dialogia. Dialogin oletusleveys on työpöytäkäytössä 800 pikseliä ja minimikorkeus 230 pikseliä. Työpöytäkäytössä dialogin korkeus kasvaa sisällön mukana ja sisältöalue muuttuu vieritettäväksi (scrolling), kun sisältö ei enää mahdu saatavilla olevaan tilaan.
Dialogi pienillä näytöillä
Pienillä näytöillä dialogi täyttää aina koko näytön riippumatta siitä onko kyseessä varmistusdialogi vai täysikokoinen dialogi.