Alert
Komponenten kan brukes til å vise en melding med ulike alvorlighetsgrader.
Bruk
Alert brukes ofte til å vise viktig informasjon som skal fremheves for brukerne.
Anatomi
- Overskrift: En kort beskrivende tittel .
- Ikon: Et grafisk symbol som formidler alvorlighetsgraden av varselet.
- Tekstinnhold: Skritlig informasjon eller beskjed assosiert med varselet.
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 kan legge til en komponent i Altinn Studio Designer ved å dra den fra venstre sidepanel til midten av siden. Når du velger komponenten, vises et panel med innstillinger for den på høyre side.
Innstillinger i Altinn Studio Designer
Innstillinger for egenskaper tilgjengelig i Altinn Studio Designer.
- Komponent-ID (
id): Automatisk generert komponent-ID (kan redigeres). - Ledetekst (
textResourceBindings.title): Overskrift. - Tekstinnhold (
textResourceBindings.body): Innholdstekst. - Alvorlighetsgrad (
severity): Påvirker varselets useende (farger og ikon).
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
Overskrift (ledetekst) og tekstinnhold legges til ved å opprette ny eller velge en eksisterende tekstressurs.
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre 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": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "info"
}
}
]
}
}
success
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "success"
}
}
]
}
}
warning
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "warning"
}
}
]
}
}
danger
App/ui/layouts/{page}.json{
"data": {
"layout": [
{
"id": "alert-id",
"type": "Alert",
"textResourceBindings": {
"title": "Vedrørende navneendring",
"body": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
},
"severity": "danger"
}
}
]
}
}