Hopp til innhold

Progress­Bar

Fremdriftsindikator kan brukes for å vise brukeren hvor langt man er kommet i en lengre operasjon.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-progress-bar-react
Bruk
import { ProgressBar } from "@fremtind/jkl-progress-bar-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-progress-bar/progress-bar.min.css";



// Eller importer stilark via SCSS.

@use "@fremtind/jkl-progress-bar/progress-bar";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

ProgressBar
Visning
Tema
Tetthet
const [val, setVal] = React.useState(50);



return (

  <div style={{ width: "100%", minWidth: "240px" }}>

    <ProgressBar aria-valuenow={val} />

    <div

      className="jkl-spacing-l--top"

      style={{

        display: "flex",

        flexDirection: "row",

        flexWrap: "wrap",

        alignItems: "center",

        justifyContent: "space-between",

      }}

    >

      <IconButton onClick={() => setVal(val - 10 < 0 ? 0 : val - 10)}>

        <ChevronLeftIcon />

      </IconButton>

      <input

        type="range"

        min="0"

        max="100"

        value={val}

        onChange={(e) => setVal(parseInt(e.target.value, 10))}

      />

      <IconButton onClick={() => setVal(val + 10 > 100 ? 100 : val + 10)}>

        <ChevronRightIcon />

      </IconButton>

    </div>

  </div>

);

React API

Her finner du en oversikt over props på komponentene i pakken.