Alert (Varsel)
Med Varsel kan du vise meldinger til brukerne med ulike alvorlighetsgrader.
Bruk
Bruk varsler når du vil vise viktig informasjon til brukerne.
Anatomi
- Overskrift: En kort beskrivende tittel.
- Ikon: Et grafisk symbol som viser hvor alvorlig varselet er.
- Tekstinnhold: En melding som forteller hva varselet dreier seg om.
Tilgjengelighet
Komponenten får ikke automatisk role="alert". Dette betyr at skjermlesere ikke vil behandle den som en varsel.
En Alert bør bare ha role="alert" hvis den vises i brukergrensesnittet som et resultat av en handling brukeren har tatt.
Vi legger automatisk til role="alert" hvis Alert har en hidden-egenskap satt til false. Dette betyr at Alert-en
ble synlig for brukeren basert på en handling brukeren tok.
Relatert
Egenskaper
| Egenskap | Type | Beskrivelse |
|---|---|---|
severity | string | Strengverdi som angir alvorlighetsgraden til varselet. Dette påvirker utseendet til varselet. Enum: "success" | "info" | "danger" | "warning" |
Konfigurering
Legg til komponent
Du legger til komponenter i Altinn Studio Designer ved å klikke på Legg til komponent når du står på en side i Utforming. Du får opp de mest brukte komponentene, og kan klikke på Vis alle for å få en oversikt over alle komponentene i Altinn Studio. Når du klikker på komponenten du vil legge til, vises den i et panel til høyre. Der kan du endre ID-en til komponenten hvis du vil, før du klikker på Legg til. Når du har lagt den til på siden, ser du egenskapene til komponenten, og kan endre dem.
Innstillinger i Altinn Studio Designer
Innstillinger for egenskaper tilgjengelig i Altinn Studio Designer.
- Komponent-ID (
id): Automatisk generert komponent-ID (du kan endre den). - Ledetekst (
textResourceBindings.title): Overskriften til varselet. Skriv en kort og informativ overskrift. Den skal fortelle brukerne hva varselet dreier seg om. - Tekstinnhold (
textResourceBindings.body): Utdyp innholdet i varselet. Pass på at du tar med informasjon som hjelper brukerne videre. - Alvorlighetsgrad (
severity): Alvorlighetsgraden angir utseendet på varselet med farger og ikon. Vi har fire alvorlighetsgrader:info,success,warning, ogdanger.
Les mer på designsystemet.no om når du bruker de ulike alvorlighetsgradene.
Korresponderende innstillinger i sidens JSON-fil.
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"severity": "info",
"textResourceBindings": {
"title": "",
"body": ""
}
}
]
}
}
Overskrift og tekstinnhold
På Utforming-siden går du til nedtrekkslisten Tekst i egenskapene for komponenten. Du legger til overskriften i Ledetekst og selve varselteksten i Tekstinnhold. Legge til og endre tekster i en app.
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Om å endre navn",
"body": "Ved å bekrefte navneendringen, ber du om å få endret navnet ditt."
},
"severity": "info"
}
}
]
}
}
Alvorlighetsgrad
Ved å endre alvorlighetsgrad endrer du varselets farger og ikon.
info
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Om å endre navn",
"body": "Ved å bekrefte navneendringen, ber du om å få endret navnet ditt."
},
"severity": "info"
}
}
]
}
}
success
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Om å endre navn",
"body": "Ved å bekrefte navneendringen, ber du om å få endret navnet ditt."
},
"severity": "success"
}
}
]
}
}
warning
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Om å endre navn",
"body": "Ved å bekrefte navneendringen, ber du om å få endret navnet ditt."
},
"severity": "warning"
}
}
]
}
}
danger
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Om å endre navn",
"body": "Ved å bekrefte navneendringen, ber du om å få endret navnet ditt."
},
"severity": "danger"
}
}
]
}
}