Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Blogg
    • Box
    • HGrid
    • Hide
    • HStack
    • Show
    • VStack
    • Accordion
    • Alert
    • Button
    • Chat
    • Checkbox
    • Chips
    • Combobox
    • ConfirmationPanel
    • CopyButton
    • DatePicker
    • Dropdown
    • ErrorSummary
    • ExpansionCard
    • GuidePanel
    • HelpText
    • InternalHeader
    • Link
    • LinkPanel
    • List
    • Loader
    • Modal
    • MonthPicker
    • Pagination
    • Panel
    • Popover
    • Provider
    • Radio
    • ReadMore
    • Search
    • Select
    • Skeleton
    • Stepper
    • Switch
    • Table
    • Tabs
    • Tag
    • Textarea
    • TextField
    • Timeline
    • ToggleGroup
    • Tooltip
    • Typography
    • StepIndicator
    • CopyToClipboard
Komponenter / Core

ReadMore

Oppdatert 4. august 2023Stabil
GithubYarn FigmaEndringslogg

    Intro

    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

    Åpne eksempel 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.

    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.

    Pass påRead more med lang setning over 2 linjer
    Pass på lange setninger. De er vanskeligere å forstå.
    Pass på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.

    GjørRead more med riktig innhold
    Read more skal inneholde lite og ren tekst (eks. lister og linker).
    Unngå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

    KommandoInteraksjon
    SpaceNår ReadMore har fokus, veksler panelet mellom åpnet og lukket
    EnterNår ReadMore har fokus, veksler panelet mellom åpnet og lukket

    Props

    ReadMore

    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

    TokenFallback
    --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.

    © 2023 NAV

    Arbeids- og velferdsetaten

    Snarveier

    • Skriv for Aksel
    • Prinsipper for brukeropplevelse
    • Security Playbook
    • Etterlevelse

    Om nettstedet

    • Hva er Aksel?
    • Personvernerklæring
    • Tilgjengelighetserklæring

    Finn oss

    • Figma
    • Github
    • Slack