ReadMore

StabilOPPDATERT 15. desember 2022

Vi har ofte situasjoner hvor brukerne trenger en forklaring på noe eller en begrunnelse for hvorfor noe er på en bestemt måte. Read more gjør dette på en god måte. Den består av en knapp som du klikker på for å åpne et panel med tekst.

Egnet til å:

Forklare vanskelige begreper eller ord
Begrunne spørsmål eller konsepter

Vurder noe annet:

Vise ekstra innhold (overflow) i artikler
Vise rikt innhold eller filer

Har du innspill til komponenten?

Send forslag

Kom i gang som designeraksel.nav.no Installeraksel.nav.no

Eksempler

Åpne i nytt vindu

Varianter

Tekststørrelse

Komponenten kommer med tekststørrelsene medium og small. Small er designet for ekspertsystemer med tett layout.

Åpen og lukket

Når du trykker på knappen, vil panelet åpne seg og dytte annet innhold på siden nedover. Standard tilstand er lukket.

Tilgjengelighet

Kommando	Interaksjon
`Space`	Når ReadMore har fokus, veksler panelet mellom åpnet og lukket
`Enter`	Når ReadMore har fokus, veksler panelet mellom åpnet og lukket

Bruk

Tekst på knappen

Teksten på knappen skal skrives slik at bruker forstår hva som vises i panelet som åpnes. Ofte refererer dette til teksten som ligger over knappen. Eks: Grunnen til at vi spør om dette.

Brukertester har avdekket at teksten på knappen ikke bør skrives som et spørsmål (Hvorfor spør vi om dette?). Det forvirret brukerne.

Det er enklere å forstå hva read more skal forklare om teksten på knappen er kort, helst 1 linje.

Read more med lang setning over 2 linjer — Pass på lange setninger. De er vanskeligere å forstå.

Read more formulert som et spørsmål — Pass på spørsmålsform. Det kan skape forvirring i kombinasjon med annet innhold.

Innhold

Innholdet i panelet skal forklare eller gi detaljer til teksten som ligger over. Innholdet bør være så enkelt som mulig. Vi anbefaler vanlig tekst med enkel formatering. For eksempel en liste. Panelet dytter annet innhold på siden nedover, så du må tenke på mengden innhold i panelet. Om det er mye innhold du må scrolle i er det fare for at knappen som lukker panelet forsvinner ut av skjermbildet.

Read more med feil innhold — Read more er feil redskap om du vil vise mye og rikt innhold.

Figma

Text property

Header- og body-tekst er nå definert som text property. Det gjør at teksten kan redigeres i høyrepanelet i Figma. Ganske digg når et tekstlag er gjemt i en tilstand av komponenten.

Props

children ReactNode: Content inside ReadMore
header ReactNode: ReadMore header content
open? boolean: Opens component if 'true', closes if 'false' Using this props removes automatic control of open-state
defaultOpen?boolean: Defaults the accordion to opened state
size?"medium" | "small": Changes fontsize for content
className? string
ref? Ref<HTMLButtonElement>: ReadMore extends HTMLButtonElement

Tokens

Token	Fallback
--ac-read-more-text	--a-text-action
--ac-read-more-hover-bg	--a-surface-hover
--ac-read-more-active-bg	--a-surface-active
--ac-read-more-line	--a-border-divider

Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår for mer info.

Intro