@fremtind/jkl-list-react

Jøkul react list component

Usage no npm install needed!

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

README

@fremtind/jkl-list-react

Beskrivelse

Se portalen for bruk og prinsipper.

Kom i gang

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

Bruk av React-pakken

Installasjon

  1. Installér pakken med yarn add @fremtind/jkl-list-react eller npm i @fremtind/jkl-list-react. Stil-pakken blir automatisk installert som en avhengighet.
  2. Importér både React-pakken og stil-pakken i prosjektet ditt:
import { UnorderedList, OrderedList, ListItem } from "@fremtind/jkl-list-react";
import "@fremtind/jkl-list/list.min.css";

Bruk

List er sammensatt av komponentene OrderedList og UnorderedList. Disse brukes sammen med ListItem for å bygge en liste.

<UnorderedList>
    <ListItem>Listeelement 1</ListItem>
    <ListItem>
        Listeelement 2
        <UnorderedList>
            <ListItem>Nøstet listeelement</ListItem>
        </UnorderedList>
    </ListItem>
</UnorderedList>

<OrderedList>
    <ListItem>Nummerert listeelement 1</ListItem>
    <ListItem>
        Nummerert listeelement 2
        <OrderedList>
            <ListItem>Nøstet nummerert listeelement</ListItem>
        </OrderedList>
    </ListItem>
</OrderedList>

Props

Komponenten tar i bruk følgende props:

  • List

    • children: Påkrevd. Listeelementene ListItem. ReactNode
    • className: Eventuell(e) css-klassenavn for komponenten. string
  • ListItem

    • children: Påkrevd. Innholdet i listeelementene. ReactNode