Hopp til innhold

List

Lister er strukturelementer. De gjør at vi kan utheve viktig informasjon for brukerne eller fortelle dem at de må gjøre noe i en bestemt rekkefølge.

EksemplerBrukKode

Kom i gang

Installer
npm i @fremtind/jkl-list-react
Bruk
import { List } from "@fremtind/jkl-list-react";



// Importer stilark via JavaScript med CSS-loader.

import "@fremtind/jkl-list/list.min.css";
React
Versjon
Dokumentasjon
Readme
Changelog

Live demo

List
Egenskaper
Variant
Visning
Tema
Tetthet
<>

  {'ordered' === "ordered" && (

    <OrderedList>

      <ListItem>Steg 1</ListItem>

      <ListItem>

        Steg 2

        <OrderedList>

          <ListItem>Steg 2a</ListItem>

          <ListItem>Steg 2b</ListItem>

        </OrderedList>

      </ListItem>

      <ListItem>Steg 3</ListItem>

      <ListItem>Steg 4</ListItem>

    </OrderedList>

  )}

  {'ordered' === "unordered" && (

    <UnorderedList>

      <ListItem>Element 1</ListItem>

      <ListItem>

        Element 2

        <UnorderedList>

          <ListItem>Nøstet 1</ListItem>

          <ListItem>Nøstet 2</ListItem>

        </UnorderedList>

      </ListItem>

      <ListItem>Element 3</ListItem>

      <ListItem>Element 4</ListItem>

    </UnorderedList>

  )}

  {'ordered' === "coverage" && (

    <List>

      <CheckListItem>Dekkes</CheckListItem>

      <CheckListItem>Dekkes også</CheckListItem>

      <CrossListItem>Dekkes ikke</CrossListItem>

      <CrossListItem>Dekkes heller ikke</CrossListItem>

    </List>

  )}

</>

React API

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