Components/ScrollArea

ScrollArea

커스텀 스크롤바를 제공하는 스크롤 영역입니다. Radix UI ScrollArea 기반.

Installation

bash
npx axis-cli add scroll-area

Usage

Tags

v1.0.0
v1.1.0
v1.2.0
v1.3.0
v1.4.0
v1.5.0
v1.6.0
v1.7.0
v1.8.0
v1.9.0
v1.10.0
v1.11.0
v1.12.0
v1.13.0
v1.14.0
v1.15.0
v1.16.0
v1.17.0
v1.18.0
v1.19.0
v1.20.0
v1.21.0
v1.22.0
v1.23.0
v1.24.0
v1.25.0
v1.26.0
v1.27.0
v1.28.0
v1.29.0
v1.30.0
v1.31.0
v1.32.0
v1.33.0
v1.34.0
v1.35.0
v1.36.0
v1.37.0
v1.38.0
v1.39.0
v1.40.0
v1.41.0
v1.42.0
v1.43.0
v1.44.0
v1.45.0
v1.46.0
v1.47.0
v1.48.0
v1.49.0
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

type
Type:"auto" | "always" | "scroll" | "hover"
Default:"hover"

스크롤바 표시 모드

scrollHideDelay
Type:number
Default:600

스크롤바 숨김 지연 (ms)

className
Type:string
Default:-

추가 CSS 클래스