<lm-tree-view> – Trevisning / Tree view

Om komponenten

Kanonisk navn

<lm-tree-view>

Synonymer

kategoritre, mappestruktur, hierarkisk liste, tree view

Kategori

innhold

ARIA-mønster

Tree View

Parts

tre

Native-first-vurdering

HTML har ingen native hierarkisk liste-widget med utvid/kollaps og riktig treItem-semantikk (<details>/<summary> er uavhengige seksjoner, ikke et sammenhengende tre med felles piltast-navigasjon på tvers av nivåer). Komponenten implementerer derfor APG-mønsteret direkte.

Nettleserstøtte

Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.

Design-tokens

var(--color-surface-muted, ...), var(--color-focus-ring, ...), var(--space-2xs, ...), var(--space-small, ...), var(--space-medium, ...), var(--radius-small, ...), var(--border-width, ...)

Sist endret

19. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

Viser en hierarkisk liste - f.eks. en kategori- eller mappestruktur - med noder som kan utvides/kollapses. Implementerer ARIA APG sitt Tree View-mønster fullt ut: role="tree"/"treeitem"/"group", aria-expanded/aria-level/aria-setsize/aria-posinset, og full piltast-navigasjon (venstre/høyre utvider/kollapser eller flytter til forelder/barn, opp/ned flytter mellom synlige noder).

Egner seg for

• Kategori- eller mappe-/undermappestrukturer med flere nivåer, der brukeren trenger å utforske og navigere hierarkiet med tastatur.
• Datastrukturer som naturlig er nøstet (f.eks. hovedkategori → underkategori → element).

Egner seg ikke for

• Flate lister uten reell hierarkisk nøsting - bruk <lm-listbox> i stedet.
• Tabelldata med rader/kolonner - bruk <lm-data-table>.

Bruk

document.querySelector("lm-tree-view").data = [
    {
        tekst: "Faste utgifter",
        utvidet: true,
        barn: [
            {tekst: "Husleie", verdi: "husleie"},
            {tekst: "Strøm", verdi: "strom"},
        ],
    },
    {tekst: "Mat", verdi: "mat"},
];

<script type="module" src="/designsystem/komponenter/innhold/tree-view/tree-view.js"></script>

<lm-tree-view etikett="Utgiftskategorier"></lm-tree-view>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Parts

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-tree-view::part(tre) {
    /* egne stiler for "Rot-elementet med `role="tree"`." */
}

Tilgjengelighet

Rot-elementet har role="tree". Hver node er role="treeitem" med aria-level/aria-setsize/aria-posinset, og noder med barn får aria-expanded. Kun én node er i tab-rekkefølgen om gangen (roving tabindex) - venstre/høyre pil utvider/kollapser eller flytter til forelder/første barn, opp/ned flytter mellom synlige noder, Home/End hopper til første/siste synlige node, Enter/mellomrom velger.

• role="tree" på rot-elementet, role="treeitem" på hver node, role="group" på hver undernode-liste.
• aria-expanded="true"/"false" settes kun på noder med barn; noder uten barn har ikke attributtet i det hele tatt (per APG).
• aria-level/aria-setsize/aria-posinset beregnes automatisk fra data-strukturen, uten at forbrukeren må sette dem selv.
• Piltaster styrer både navigasjon og utvid/kollaps: høyre utvider en kollapset node (eller flytter inn i første barn hvis allerede utvidet), venstre kollapser en utvidet node (eller flytter til forelder).

Detaljer

• Data gis som en JS-property (element.data = [...]), ikke et attributt - samme mønster som <lm-chart-bar>/<lm-data-table>, siden strukturerte/nøstede data ikke egner seg som attributt-strenger. Formen er {tekst, verdi?, barn?, utvidet?}, der barn er en nøstet array av samme form.
• Sett utvidet: true på en node i data for at den skal starte utvidet - alle andre starter kollapset.

Referanser

Se også:

• ../data-table/index.html - brukes for flate, tabellformede data i stedet for et hierarki.

Avhengigheter: Ingen