Veileder

Veileder er en illustrasjon av en NAV-veileder som snakker til brukeren. Komponenten skal brukes som et personlig støtteelement som gir råd, tips og tilbakemelding underveis i søknader og andre komplekse prosesser.

NPM-pakke

Navn:nav-frontend-veileder
Siste versjon:2.0.34
Peer dependencies:classnames nav-frontend-js-utils nav-frontend-veileder-style prop-types react

Installering

npm install nav-frontend-veileder classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-veileder-style nav-frontend-core --save

Kopiert!


yarn add nav-frontend-veileder classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-veileder-style nav-frontend-core

Kopiert!

Moduler

Import

import Veileder from 'nav-frontend-veileder';

Kopiert!

React props

PropertyTypeDefaultRequiredDescription
center
boolean
-
Skrur av 80% height på children, og rendrer i full høyde (hvis innholdet skal sentreres)
children
ReactNode
-
Custom SVG-element som illustrerer en figur, f.eks. en av disse: https://app.zeplin.io/project/59831e455850985791bdeb4d/screen/5a7c1fcc36781f9423ab6a0e
className
string
-
Klassenavn
fargetema
"normal" | "suksess" | "advarsel" | "feilmelding" | "info"
-
Predefinerte fargetemaer som bestemmer bakgrunnsfargen på veilederen.
nomask
boolean
-
Skrur av sirkulær maskering/cropping av children
posisjon
"flytende" | "topp" | "høyre" | "bunn" | "venstre"
-
Posisjon på snakkeboblen
storrelse
"S" | "M" | "L" | "XL"
-
Predefinerte størrelser
tekst
ReactNode
-
Tekst eller HTML som rendres i en snakkeboble
transparent
boolean
-
Skrur av bakgrunnsfargen
type
"normal" | "suksess" | "advarsel" | "feilmelding"
-
Predefinerte nøkler for styling av snakkeboblen, avhengig av type budskap.