<lm-tabs> – Faner / Tabs

Om komponenten

Kanonisk navn: <lm-tabs>
Synonymer: fanepanel, tab-panel, tabs, fliker
Kategori: navigasjon
ARIA-mønster: Tabs
Parts: tablist
Native-first-vurdering: HTML har ingen native fane-mekanisme som bytter paneler uten sidelast og samtidig eksponerer riktig tablist/tab/tabpanel-semantikk - <details>/<summary> gir uavhengige, samtidig-utvidbare seksjoner (Disclosure-mønsteret), ikke gjensidig utelukkende faner med roving tabindex. Komponenten implementerer derfor APG-mønsteret direkte, med native <button>-elementer som fane-triggere.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er (slotchange, CustomEvent).
Design-tokens: var(--color-accent, ...), var(--color-focus-ring, ...), var(--color-surface-muted, ...), var(--space-2xs, ...), var(--space-small, ...), var(--space-medium, ...), var(--radius-medium, ...), var(--font-weight-bold, ...), var(--transition-duration, ...), var(--border-width, ...)
Sist endret: 19. september 2026
Brukt: Ikke i bruk andre steder ennå

Formål

Bytter synlig innhold mellom flere paneler på samme side, uten at brukeren navigerer til en ny URL - f.eks. "Oversikt"/"Detaljer"/"Historikk" for samme datasett. Implementerer ARIA APG sitt Tabs-mønster fullt ut: role="tablist"/"tab"/"tabpanel", roving tabindex, og piltast-/Home-/End-navigasjon mellom fanene.

Merk: Forveksle ikke med <lm-nav-tabs>, som er ren side-til-side-navigasjon med vanlige <a>-lenker og ikke har noe tablist/tabpanel-forhold - bruk <lm-tabs> når innholdet bytter uten sidelast, <lm-nav-tabs> når hver fane faktisk er en egen side.

Egner seg for

Å dele opp mye innhold på én side i tematiske paneler brukeren bytter mellom uten sidenavigasjon.
Dashboards og detaljvisninger med flere "visninger" av samme datasett (f.eks. tabell/diagram).

Egner seg ikke for

Navigasjon mellom faktiske, separate sider - bruk <lm-nav-tabs> med ekte <a href>-lenker i stedet.
Kun to gjensidig utelukkende tilstander uten flere paneler - vurder da en enklere veksleknapp.

Bruk

<script type="module" src="/designsystem/komponenter/navigasjon/tabs/tabs.js"></script>

<lm-tabs>
    <button type="button" slot="tab" panel="oversikt" valgt>Oversikt</button>
    <button type="button" slot="tab" panel="detaljer">Detaljer</button>

    <section slot="panel" name="oversikt">
        <p>Oppsummeringsinnhold.</p>
    </section>
    <section slot="panel" name="detaljer">
        <p>Fullstendige detaljer.</p>
    </section>
</lm-tabs>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Events

Event	Type	Beskrivelse
`tabs:endret`	`CustomEvent`	Dispatches når en annen fane velges. `detail.panel` er verdien av den valgte fane-knappens `panel`-attributt.

Slots

Slot	Beskrivelse
`tab`	En eller flere `<button type="button" slot="tab" panel="...">`-elementer - selve fane-etikettene. `panel`-attributtet kobler knappen til panelet med samme `name`.
`panel`	Ett innholdselement (typisk `<section slot="panel" name="...">`) per fane. Kun det valgte panelet er synlig; resten får `hidden`.

Parts

Part	Beskrivelse
`tablist`	Wrapperen med `role="tablist"` rundt fane-knappene.

Styling med ::part()

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

lm-tabs::part(tablist) {
    /* egne stiler for "Wrapperen med `role="tablist"` rundt fane-knappene." */
}

Tilgjengelighet

Fane-knappene får role="tab", aria-selected og aria-controls; panelene får role="tabpanel", aria-labelledby og tabindex="0". Kun den valgte fanen er i tab-rekkefølgen (roving tabindex) - venstre/høyre pil, Home og End flytter fokus mellom fanene, i tråd med APG Tabs.

Fane-knappene får role="tab", aria-selected="true"/"false" og aria-controls som peker til det tilhørende panelets id.
Panelene får role="tabpanel", aria-labelledby som peker til fane-knappens id, og tabindex="0" slik at panelinnholdet er nåbart med Tab rett etter den aktive fanen.
Kun den valgte fanen har tabindex="0" (roving tabindex) - de andre får tabindex="-1", slik at Tab-tasten hopper forbi de uvalgte fanene.
Venstre/Høyre pil flytter fokus (og velger) mellom fanene syklisk; Home/End hopper til første/siste fane.

Detaljer

Kobling mellom fane og panel skjer via navn (panel="x" på knappen, name="x" på panelet), ikke rekkefølge - panelene kan derfor ligge i valgfri DOM-rekkefølge.
id-er genereres automatisk hvis knapp/panel ikke allerede har en, slik at aria-controls/aria-labelledby alltid er gyldige uten at forbrukeren må sette dem manuelt.
Sett valgt (uten verdi) på fane-knappen som skal være aktiv ved oppstart - uten dette velges første fane.

Referanser

Se også:

../nav-tabs/index.html - brukes i stedet når fanene faktisk er navigasjon til separate sider.

Avhengigheter: Ingen