DescriptionList

Egnet til:

• å liste opp en samling av ikke-interaktive opplysninger i seksjoner eller bokser. 
• å fordele opplysninger over flere kolonner.
• oppsummering av verdier før innsending av skjema

Uegnet til:

• å vise skrivebeskyttede verdier sammen med andre skjemafelt der brukeren forventes å navigere mellom feltene med tastatur. Bruk Textfield i readonly-tilstand i stedet. DescriptionList kan brukes til statisk informasjon eller oppsummeringer i et skjemasteg der brukeren ikke skal fylle ut eller endre noe.

Komponenter som ligner:

• TextField i readonly-tilstand.

Teknisk dokumentasjon

Se DescriptionList i Storybook for tekniske detaljer.

Varianter

Vertikal og horisontal

DescriptionList finnes i både horisontal og vertikal visning. Vertikal visning lister elementene opp i en kolonne nedover på siden. Den fungerer ofte godt på mobil. Horisontal visning trenger litt plass i bredden, og fungerer best på større skjermer. Den bruker den plassen den får og fordeler inneholdet i kolonner. 

Vertikal visning 

Horisontal visning

Størrelse

Komponenten finnes i small og medium størrelse. Small brukes kun i spesielle tilfeller hvor det er lite plass.

Uthevet tekst

Standard oppførsel er at ledetekst er uthevet. Dette er mulig å endre om det er behov for at verdien skal være uthevet (bold) i stedet. 

Hvordan bruke komponenten  

Vi anbefaler DescriptionList på steder hvor du har behov for å vise grupper av informasjon, for eksempel i bokser, oppsummeringer, kort eller liknende. 

Styre plassering i listen

`DescriptionList` er fleksibel når det gjelder hvordan innholdet presenteres. Du kan styre oppsettet på to nivåer:

1. hvordan listeelementene plasseres i forhold til hverandre
2. hvordan ledetekst og verdi plasseres i hvert listeelement

Elementenes plassering i listen

Den overordnede layouten styres av `variant`, som kan være:

• `vertical` – elementene vises under hverandre 
• `horizontal` – elementene vises ved siden av hverandre 

Plassering i hvert element

Hvert element består av ledetekst og verdi. Disse kan plasseres på to måter:

• side om side
• over/under hverandre

Plasseringen styres av `descriptionDirection`.

Kombinasjon av layout

Plasseringen i liste og hvert listeelement er uavhengige av hverandre. Det betyr at du for eksempel kan ha:

• en horisontal liste med elementer som ligger over/under hverandre 
• en vertikal liste med elementer som ligger side om side 

Tilpasning for mobil

Komponenten har egne innstillinger for mobilvisning. Som standard brukes:

• vertikal liste
• listeelementer med over/under-plassering (term over description) 

Dette gir som regel best lesbarhet på små skjermer. Ved behov kan dette overstyres med:

• `isVerticalOnMobile` – styrer liste-layout 
• `isDescriptionVerticalOnMobile` – styrer plassering av term og description 

DescriptionList i oppsummeringssteg

DescriptionList i kort eller bokser

Universell utforming  

• Komponenten er bygget opp av dl og dt-elementer, med krav om at begge elementer har verdi (required).