@fremtind/jkl-message-box-react

Jøkul react message box components

Usage no npm install needed!

<script type="module">
  import fremtindJklMessageBoxReact from 'https://cdn.skypack.dev/@fremtind/jkl-message-box-react';
</script>

README

@fremtind/jkl-message-box-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

Lær hvordan du kan ta i bruk Jøkul

Bruk av React-pakken

Installasjon

  1. Installér pakken med yarn add @fremtind/jkl-message-box-react eller npm i @fremtind/jkl-message-box-react. Stil-pakken blir automatisk installert som en avhengighet.

  2. Importer både React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:

import { InfoMessageBox, ErrorMessageBox, WarningMessageBox, SuccessMessageBox } from "@fremtind/jkl-message-box-react";
import "@fremtind/jkl-message-box/message-box.min.css";

Bruk

Komponentene tar følgende props:

  • children: Påkrevd. Innholdet i meldingsboksen. ReactNode
  • title: Overskriften til meldingsboksen. string
  • fullWidth: Angir om meldingsboksen skal ta opp hele bredden av beholderen den er inne i. boolean
  • className: Eventuell(e) css-klassenavn for komponenten. string
  • role: Overstyring av role-attributtet. For å "skru av" standardrollen kan du bruke verdien none presentation (ARIA 1.1). string

En enkel bruk av meldingsboksen kan se slik ut:

<SuccessMessageBox title="Opplasting fullført">Filene ble lastet opp uten feil</SuccessMessageBox>

Du kan sende mer enn bare ren tekst som innhold. Innholdet blir rendret inne i et <div>-element:

<ErrorMessageBox title="Feil under innsending av skjema">
    <Body>Skjemaet kunne ikke sendes inn på grunn av feil i følgende felter:</Body>
    <UnorderedList>
        <ListItem>Fødselsnummer</ListItem>
        <ListItem>Epostadresse</ListItem>
        <ListItem>Telefonnummer</ListItem>
    </UnorderedList>
    <Body>Rett opp feilene og send deretter inn skjemaet på nytt</Body>
</ErrorMessageBox>

Tilgjengelighet

Når vi bruker meldinger med farge, må vi alltid huske å ha en god og beskrivende overskrift, siden farge ikke er et godt nok kjennetegn for alle brukere. Skriv en presis meldingstekst, der du sier det viktigste først.