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
Installér pakken med
yarn add @fremtind/jkl-message-box-react
ellernpm i @fremtind/jkl-message-box-react
. Stil-pakken blir automatisk installert som en avhengighet.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 avrole
-attributtet. For å "skru av" standardrollen kan du bruke verdiennone 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.