@fremtind/jkl-loader-react

Jøkul react loader component

Usage no npm install needed!

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

README

@fremtind/jkl-loader-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

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

Bruk av React-komponenten

Installasjon

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

  2. Importer både React-pakken og stil-pakken i prosjektet ditt:

import { Loader } from "@fremtind/jkl-loader-react";
import "@fremtind/jkl-loader/loader.min.css";

Bruk

Komponenten tar følgende props:

  • textDescription: Påkrevd. Tekstlig forklaring av innlasting, f.eks. "Laster inn skjema". string
  • variant: Velg mellom ulike størrelser. large (default), medium eller small.
  • className: Eventuell(e) css-klassenavn for komponenten. string
  • politeness: Sett politeness setting på aria-live. polite (default) eller assertive.

Den enkleste bruken av komponenten er altså:

<Loader textDescription="Laster inn" />

Prop'en className er praktisk dersom du vil benytte spacing eller sette farge gjennom hjelpeklassene fra jkl-core:

<Loader className="jkl-spacing-l--top" /> // Gir spacing over loaderen

Dersom du vil bruke inline loader i knapp har funksjonalitet for det blitt eksponert via props i jkl-button-react.