<lm-splitter> – Panel-skillelinje / Splitter

Om komponenten

Kanonisk navn

<lm-splitter>

Synonymer

delt panel, resizable panel, vindusskillelinje, window splitter

Kategori

layout

ARIA-mønster

Window Splitter

Parts

wrapper, forste, andre, skillelinje

Native-first-vurdering

HTML har ingen native, justerbar to-panel-layout med tastaturstøtte (CSS resize gjelder kun ett enkelt element mot dets egen kant, ikke en delt grense mellom to paneler). Komponenten bygger derfor selve skillelinjen med role="separator" og full piltast-/pekerstøtte, mens selve panel-oppdelingen skjer med vanlig CSS Grid.

Nettleserstøtte

Bruker Pointer Events (bredt støttet) for drag - ingen spesielle forbehold utover det.

Design-tokens

var(--color-accent, ...), var(--color-surface-muted, ...), var(--color-focus-ring, ...), var(--border-width, ...)

Sist endret

19. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

En flyttbar skillelinje mellom to paneler - f.eks. et sidepanel og hovedinnhold i et dashboard - som lar brukeren justere den relative størrelsen med mus/berøring eller piltaster. Implementerer ARIA APG sitt Window Splitter-mønster: skillelinjen får role="separator" med aria-valuenow/-min/-max, og piltaster justerer størrelsen i faste steg.

Egner seg for

• Dashboards og arbeidsflater med to paneler der brukeren har nytte av å selv justere hvor mye plass hvert panel får.
• Sidepanel + hovedinnhold-oppsett der begge deler trenger variabel bredde avhengig av bruk.

Egner seg ikke for

• Faste, ikke-justerbare layout-forhold - bruk <lm-grid>/<lm-flex> med faste andeler i stedet.
• Mobil/smale skjermer der to side-ved-side-paneler uansett ikke gir plass - vurder å stable panelene i stedet under et brytepunkt.

Bruk

<script type="module" src="/designsystem/komponenter/layout/splitter/splitter.js"></script>

<lm-splitter verdi="30" min="20" maks="60" style="block-size: 60vh;">
    <nav slot="forste">... sidepanel ...</nav>
    <main slot="andre">... hovedinnhold ...</main>
</lm-splitter>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Events

Slots

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-splitter::part(wrapper) {
    /* egne stiler for "Grid-containeren rundt begge panelene og skillelinjen." */
}

lm-splitter::part(forste) {
    /* egne stiler for "Det første panelet." */
}

lm-splitter::part(andre) {
    /* egne stiler for "Det andre panelet." */
}

lm-splitter::part(skillelinje) {
    /* egne stiler for "Selve den flyttbare skillelinjen (`role="separator"`)." */
}

Tilgjengelighet

Skillelinjen har role="separator", aria-orientation, og aria-valuenow/-min/-max som alltid reflekterer gjeldende og tillatt størrelsesintervall. Piltaster (høyre/venstre i horisontal modus, ned/opp i vertikal modus) justerer størrelsen i faste steg; Home/End hopper til min/maks.

• role="separator" med aria-orientation ("vertical" for side-ved-side-paneler, "horizontal" for stablede paneler - motsatt av komponentens eget orientering-attributt, per ARIA-spesifikasjonens definisjon av selve skillelinjens retning).
• aria-valuenow/aria-valuemin/aria-valuemax oppdateres synkront med den visuelle posisjonen, i prosent.
• Skillelinjen er selvstendig tastaturnåbar (tabindex="0") uavhengig av panelenes eget innhold.

Detaljer

• Panel-størrelsen implementeres med CSS Grid (grid-template-columns/-rows) satt dynamisk av komponenten - selve panelene er vanlige <div>-er med overflow: auto, ikke noe eget scroll-rammeverk.
• verdi klemmes alltid til [min, maks] ved setting, uansett om endringen kommer fra drag, piltaster, eller direkte property-tilordning.

Referanser

Se også:

• ../grid/index.html - brukes for fast, ikke-justerbar rutenett-layout.

Avhengigheter: Ingen