TitleBar
Komponentti palvelukohtaisen brändäyksen lisäämiseen sivun yläosaan.
Julkaistu versiossa 5.0.0
Esikatselu
Käyttötarkoitus
TitleBar on sivun yläosaan sijoitettava palvelukohtainen elementti, jolla luodaan palvelun brändiä. Komponentissa näkyy logo, joka toimii linkkinä kyseisen palvelun etusivulle. Lisäksi komponentissa voidaan tarvittaessa näyttää palvelun nimi ja jokin yksittäinen toiminto, kuten kielivalinta.
TitleBaria voi käyttää esimerkiksi erillissovelluksissa, kuten laskureissa.
Titlebarin avulla voidaan tietyissä tilanteissa näyttää palvelun logo. Esimerkiksi asiointipalveluissa logo näytetään sivunavigaatiossa (Sidebar). Pienellä näytöllä sivunavigaatio kuitenkin piilotetaan, jolloin tässä näkymässä palvelun logo voidaan näyttää TitleBarin avulla.
Tee näin
- Käytä TitleBaria luomaan palvelun brändiä erillissovelluksissa.
- Käytä TitleBaria näyttämään palvelun logo.
- Voit käyttää TitleBaria myös muiden palvelukohtaisten toimintojen esittämiseen.
Älä tee näin
- Älä tuo TitleBariin toimintoja, jos palvelussa on käytössä työkalupalkki (MainBar). Vie toiminnot silloin työkalupalkkiin.
- Älä käytä TitleBaria navigaatiopalkkina tai työkalupalkkina, johon tuodaan useita toimintoja.
- Jos käytät sivunavigaatioon Sidebar-komponenttia, älä näytä sivunavigaatiota ja Titlebaria samaan aikaan. Muutoin logo näkyy kahteen kertaan.
Saavutettavuus
Komponentin responsiivinen toteutus on osittain kehittäjän vastuulla. Kapeilla näytöillä lisätoiminnot tulee piilottaa, jos ne eivät luontevasti mahdu ruudulle. Näytön kaventuessa mahdolliset lisätoiminnot pudotetaan oletuksena uudelle riville, jossa ne tasataan oikealle.
Toimintolinkkien ja -painikkeiden saavutettavuus on kehittäjän vastuulla, kun niiden tekstit piilotetaan. Toiminnoille on tarpeen mukaan lisättävä aria-label-attribuutit.
Esimerkit
Komponentti pelkällä tunnuksella
Komponentti tunnuksella ja palvelun nimellä
Komponentti OmaKela-tunnuksella ja lisätoiminnolla
Täysleveä komponentti
Komponentin sisältö voidaan halutessa näyttää koko layoutin levyisenä, ilman että se saa containerin maksimileveyden.