Sist endret: 28. mai 2024

Alert

Komponenten kan brukes til å vise en melding med ulike alvorlighetsgrader.

🚧 Denne dokumentasjonen er under oppdatering.

Bruk

Alert brukes ofte til å vise viktig informasjon som skal fremheves for brukerne.

Anatomi

Alert anatomy

  1. Overskrift: En kort beskrivende tittel .
  2. Ikon: Et grafisk symbol som formidler alvorlighetsgraden av varselet.
  3. 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

EgenskapTypeBeskrivelse
severitystringStrengverdi 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

Vi oppdaterer for øyeblikket Altinn Studio med flere muligheter for innstillinger! Dokumentasjonen oppdateres fortløpende, men det kan være flere innstillinger tilgjengelig enn det som beskrives her og noen innstillinger kan være i betaversjon.

    Innstillinger for egenskaper tilgjengelig i Altinn Studio Designer.

    Altert innstillingspanel
    Innstillinger for Alert

    • 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.

      Alert info innstillinger
      Alert text settings
      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

        Info card

        Alert info innstillinger
        Alert 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

          Success card

          Alert success innstillinger
          Alert 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

            Warning card

            Alert warning innstillinger
            Alert 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

              Danger card

              Alert danger innstillinger
              Alert 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"
                    }
                    }
                  ]
                }
              }