Accordion
Med trekkspillister kan vi presentere mye innhold på liten plass. En trekkspilliste har én eller flere rader, som brukeren kan klikke på for å vise eller skjule informasjon.
- Personer med et norsk fødselsnummer.
- Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås.
- Livsforsikring kan kjøpes på nett av personer mellom 18 og 79 år.
Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås. Kritisk sykdom kan kjøpes på nett av personer mellom 18 og 58 år. Ønsker du en forsikringssum på mer enn 1,1 millioner trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med banken din.
Personer med et norsk fødselsnummer. Personer som har vært bosatt i Norge i minst de fem siste årene før avtalen inngås. Uførepensjon kan kjøpes på nett av personer mellom 18 og 60 år. Ønsker du en forsikringssum på mer enn 96 000 trenger vi ekstra økonomiske opplysninger. Da må du ta kontakt med banken din.
En trekkspilliste med én rad fungerer ikke alltid like bra. Hvis du ønsker et alternativ kan du vurdere å ta i bruk ExpandButton.
Når bruker vi en Accordion?
Viktig informasjon bør alltid ligge synlig, ikke skjult i en trekkspilliste. Hvilken informasjon som er viktig kommer an på situasjonen din. Om du er i tvil, velg å ikke bruke Accordion.
- Trekkspillister passer godt til tilleggsinformasjon som kan være til hjelp for brukerne.
- Teksten på hver rad i listen må være tydelig, og må beskrive innholdet for brukeren. "Vis mer" er ikke en god nok tittel.
- Du kan sette en overskrift for hele trekkspillisten om du ønsker.
Eksempler på bruk
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
title | ingen | Påkrevd | string | |
startExpanded | false | Ikke påkrevd | boolean | undefined | |
className | ingen | Ikke påkrevd | string | undefined | |
onClick | ingen | Ikke påkrevd | ((e: MouseEvent<Element, MouseEvent>, isOpen: boolean) => void) | undefined | |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |