Installation
bash
npx axis-cli add scroll-areaUsage
tsx
import { ScrollArea, Separator } from '@axis-ds/ui-react'
const tags = Array.from({ length: 50 }).map(
(_, i) => `v1.${i}.0`
)
export function Example() {
return (
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
{tags.map((tag) => (
<div key={tag}>
<div className="text-sm">{tag}</div>
<Separator className="my-2" />
</div>
))}
</div>
</ScrollArea>
)
}Components
ScrollArea스크롤 영역 컨테이너
ScrollBar커스텀 스크롤바 (수직/수평)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "auto" | "always" | "scroll" | "hover" | "hover" | 스크롤바 표시 모드 |
scrollHideDelay | number | 600 | 스크롤바 숨김 지연 (ms) |
className | string | - | 추가 CSS 클래스 |
typeType:
"auto" | "always" | "scroll" | "hover"Default:
"hover"스크롤바 표시 모드
scrollHideDelayType:
numberDefault:
600스크롤바 숨김 지연 (ms)
classNameType:
stringDefault:
-추가 CSS 클래스