Lesmerpanel

Lesmerpanel er en komponent som lar deg ekspandere og kollapse innhold. Passer for lengre tekster og infopanel der ikke alt innhold er like relevant. Komponenten bruker npm-pakken React-collapse og extender props fra den.

NPM-pakke

Navn:nav-frontend-lesmerpanel
Siste versjon:0.0.56
Peer dependencies:classnames nav-frontend-chevron nav-frontend-js-utils nav-frontend-lesmerpanel-style prop-types react react-collapse

Installering

npm install nav-frontend-lesmerpanel classnames nav-frontend-chevron nav-frontend-chevron-style prop-types react nav-frontend-js-utils lodash.throttle nav-frontend-lesmerpanel-style nav-frontend-core nav-frontend-paneler-style react-collapse --save

Kopiert!


yarn add nav-frontend-lesmerpanel classnames nav-frontend-chevron nav-frontend-chevron-style prop-types react nav-frontend-js-utils lodash.throttle nav-frontend-lesmerpanel-style nav-frontend-core nav-frontend-paneler-style react-collapse

Kopiert!

Moduler

Import

import Lesmerpanel from 'nav-frontend-lesmerpanel';

Kopiert!

React props

PropertyTypeDefaultRequiredDescription
apneTekst
ReactNode
-
Tekst som vises for å åpne panelet
border
boolean
-
Hvis komponenten skal brukes på hvit bakgrunn kan denne brukes for å gi den en border
children
ReactNode
-
Innhold som vises når man klikker på "Åpne"
className
string
-
Egendefinert klassenavn
defaultApen
boolean
-
Hvorvidt panelet initielt er åpent
id
string
-
ID til panelet
intro
ReactNode
-
Innhold som plasseres før "Åpne"
lukkTekst
ReactNode
-
Tekst som vises for å lukke panelet
onClose
(event: SyntheticEvent<HTMLButtonElement, Event>) => void
-
Funksjon som kalles når panelet lukkes
onOpen
(event: SyntheticEvent<HTMLButtonElement, Event>) => void
-
Funksjon som kalles når panelet åpnes