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