@fremtind/jkl-typography-react

Denne pakken inneholder komponenter for spesifikke typografiske komponenter, slik som Label, SupportLabel og Link, som brukes av flere av komponentene i Jøkul. Bruk av andre typografiske elementer, som overskrifter og avsnittstiler, se siden om typografi i portalen.

NB! React-komponentene for overskrifter og avsnittstiler i denne pakken er utgående. Se migrasjonsguiden for jkl-core@3.0.0 for nærmere informasjon.

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

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

Bruk av React-pakken

$3

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

2. Importer komponenten(e) du trenger i prosjektet ditt. Stilen hentes fra jkl-core:

``js
import { Label, SupportLabel, Link } from "@fremtind/jkl-typography-react";
import "@fremtind/jkl-core/core.min.css";
`

$3

#### Label

Denne komponenten brukes for å lage etiketter for skjemafelter. Du velger størrelse på labelet ved hjelp av variant-prop-en, som kan ha verdiene "small", "medium" og "large". Label har to forskjellige typer bruk.

1. Du kan plassere den inne i et -element _sammen med_ feltet den skal være etikett for:

`tsx

Fødselsnummer // returnerer et -element


`

2. Du kan bruke den frittstående, rendret som et -element for et spesifisert skjemaelement:

`tsx
Fornavn

`

NB! Alle skjemafelter i Jøkul (unntatt BaseInputField) bruker allerede Label. Du trenger kun denne komponenten om du lager dine egne typer skjemafelter.

#### SupportLabel

Denne komponenten brukes for å vise hjelpetekst og feilmelding i tilknytning til et skjemafelt. Begge meldingene tas som props til komponenten, og dersom errorLabel er gitt vil _kun_ denne vises.

`tsx

Fødselsnummer // returnerer et -element



`

NB! Alle skjemafelter i Jøkul (unntatt BaseInputField) bruker allerede SupportLabel. Du trenger kun denne komponenten om du lager dine egne typer skjemafelter.

#### Link

Denne komponenten genererer en tekstlenke med riktig formatering. Bruk prop-en negative om den skal vises på mørk bakgrunn.

`tsx


Les vilkårene nøye før du signerer


``