Tabs
En komponent som lar deg organisere og velge mellom forskjellig innhold.
Bruk
Tabs-komponenten lar deg organisere og bytte mellom ulike innholdsseksjoner ved å klikke på overskriftene. Dette gir en plasseffektiv og ryddig måte å presentere informasjon på.
Anatomi
- Overskrift: Den klikkbare seksjonstittelen som brukeren samhandler med for å velge eller bytte innhold.
- Innholdsområde: Området som viser eller skjuler informasjon når overskriften klikkes.
Egenskaper
| Egenskap | Type | Beskrivelse |
|---|---|---|
id | string | Unik ID-streng for komponenten. |
size | string | Setter størrelsen på fanen. Enum:: "small" | "medium" | "large"Default: medium. |
defaultTab | string | Angir en fane som er valgt som standard. |
tabs | Array | En liste av fane objekter som inneholder konfigurasjon(id, title, icon, children) per fane. |
tabs.id | string | Unik ID-streng for fanen. Må være unik blant alle fanene for denne komponenten. |
tabs.title | string | Tittelen for fanen. |
tabs.icon | string | En URL-streng som peker på ikonet til fanen. |
tabs.children | Array | Spesifiserer hvilke komponenter du vil vise når fanen er aktiv. |
Konfigurasjon
Legg til komponenten
{
"data": {
"layout": [
{
"id": "tabs",
"type": "Tabs",
"tabs": [
{
"id": "tab-1",
"children": ["test-tab-paragraph"],
"title": "Tab 1",
"icon": "/ttd/frontend-test/images/altinn-logo.svg"
},
{
"id": "tab-2",
"children": ["test-tab-paragraph2"],
"title": "Tab 2"
}
]
},
]
}
}
defaultTab
Dette kan settes til ID-en til den spesifikke fanen du ønsker skal være valgt som standard.
tabs
id
Unik ID-streng for fanen.
title
Tittelen for kan legges til som tekst direkte eller refereres via en teksttast til en tekstressurs.
Size
Setter størrelsen på fanen. Enum: "small" | "medium" | "large"
Default: medium.
icon
En URL-sti til ikonet.
children
Spesifiserer hvilke komponenter du vil vise når fanen er aktiv, ved å legge til ID-ene deres i en liste under children.
Eksempel
Faner med avsnitt som underordnede elementer.
{
"data": {
"layout": [
{
"id": "tabs",
"type": "Tabs",
"tabs": [
{
"id": "tab-1",
"children": ["test-tab-paragraph"],
"title": "Tab 1",
"icon": "/ttd/frontend-test/images/altinn-logo.svg"
},
{
"id": "tab-2",
"children": ["test-tab-paragraph2"],
"title": "Tab 2"
}
]
},
]
}
}