ReadMore

Oppdatert 4. august 2023Stabil

Vi har ofte situasjoner hvor brukerne trenger en mer utdypende forklaring eller en begrunnelse. Read more gjør dette på en god måte. Den består av en knapp som du klikker på for å åpne et tekstpanel.

Egnet til:

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

Uegnet til:

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

Har du innspill til komponenten?

Send forslag

Eksempler

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.

Retningslinjer

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.

Plassering i skjema

Om du bruker ReadMore for å forklare noe knyttet til et skjemaelement plasserer du det under skjemaelementet. Detaljert forklaring kan du lese i artikkelen Rekkefølge på elementene i et spørsmål.

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.

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

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>: Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom; 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 eller utforsk alle design tokens.

Intro