ScrollArea

Kildekode på GitHub · Les som Markdown

ScrollArea gir tilpassede scrollbarer som ser like ut på tvers av operativsystemer. Bygget på Radix UI ScrollArea. Perfekt for sidebarer, lister og containere med begrenset høyde.

Importering

import { ScrollArea } from "@kilden/designsystem";

Grunnleggende bruk

<ScrollArea className="h-[200px] w-[300px] rounded-md border border-neutral-border-default p-4">
<div>
  <h4 style={{ marginBottom: "1rem", fontWeight: 600, fontSize: "0.875rem" }}>Komponenter</h4>
  {["Accordion", "Alert", "Avatar", "Badge", "Breadcrumb", "Button", "Card", "Checkbox", "Dialog", "DropdownMenu", "Input", "Label", "Progress", "Select", "Separator", "Skeleton", "Slider", "Switch", "Table", "Tabs", "Textarea", "Toast", "Toggle", "Tooltip"].map((component) => (
    <div key={component}>
      <div style={{ padding: "0.25rem 0", fontSize: "0.875rem" }}>{component}</div>
      <Separator />
    </div>
  ))}
</div>
</ScrollArea>

Med horisontal scrolling

<ScrollArea className="w-[400px] whitespace-nowrap rounded-md border border-neutral-border-default p-4">
<div style={{ display: "flex", gap: "1rem" }}>
  {["Januar", "Februar", "Mars", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Desember"].map((month) => (
    <div key={month} style={{ padding: "0.5rem 1rem", borderRadius: "0.375rem", fontSize: "0.875rem", border: "1px solid var(--color-neutral-border-default)" }}>
      {month}
    </div>
  ))}
</div>
</ScrollArea>

Bruksanbefalinger

Sidebar med 30+ menyelementer i et fast 300px-høyt område

Bruk for begrensede containere

ScrollArea passer for innhold som må begrenses i høyde eller bredde — sidebarer, dropdown-innhold, lange lister.

ScrollArea rundt hele sideinnholdet

Ikke bruk for hele sider

For sidescrolling, bruk nettleserens innebygde scrollbar. ScrollArea er for delvis innhold innenfor en side.

Tilgjengelighet

Bevarer nettleserens standard scroll-oppførsel for mus og tastatur
Tilpassede scrollbarer er kun visuelle — all funksjonalitet er den samme
Støtter touch-scrolling på mobile enheter
Piltaster og Page Up/Down fungerer som vanlig

Props

ScrollArea

Arver alle props fra Radix ScrollArea.Root. Viktige props:

Prop	Type	Default	Beskrivelse
`type`	`"auto" \| "always" \| "scroll" \| "hover"`	`"hover"`	Når scrollbar vises
`scrollHideDelay`	`number`	`600`	Forsinkelse i ms før scrollbar skjules

ScrollBar

Prop	Type	Default	Beskrivelse
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Retning på scrollbaren