Scroll Area

브라우저 간 일관된 커스텀 스크롤 스타일을 위해 네이티브 스크롤 기능을 확장합니다.

공지 목록

공지사항 50호
공지사항 49호
공지사항 48호
공지사항 47호
공지사항 46호
공지사항 45호
공지사항 44호
공지사항 43호
공지사항 42호
공지사항 41호
공지사항 40호
공지사항 39호
공지사항 38호
공지사항 37호
공지사항 36호
공지사항 35호
공지사항 34호
공지사항 33호
공지사항 32호
공지사항 31호
공지사항 30호
공지사항 29호
공지사항 28호
공지사항 27호
공지사항 26호
공지사항 25호
공지사항 24호
공지사항 23호
공지사항 22호
공지사항 21호
공지사항 20호
공지사항 19호
공지사항 18호
공지사항 17호
공지사항 16호
공지사항 15호
공지사항 14호
공지사항 13호
공지사항 12호
공지사항 11호
공지사항 10호
공지사항 9호
공지사항 8호
공지사항 7호
공지사항 6호
공지사항 5호
공지사항 4호
공지사항 3호
공지사항 2호
공지사항 1호
examples/krds/scroll-area-demo.tsx
import * as React from "react"

import { ScrollArea } from "@/components/ui/scroll-area"

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/scroll-area.json

사용법

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

구성

다음 조합으로 ScrollArea:

ScrollArea
└── ScrollBar

예제

Horizontal

Use ScrollBar with orientation="horizontal" for horizontal scrolling.

국립중앙박물관 소장 작품
제공: 국립중앙박물관
국립현대미술관 소장 작품
제공: 국립현대미술관
국립민속박물관 소장 작품
제공: 국립민속박물관
examples/krds/scroll-area-horizontal-demo.tsx
import * as React from "react"
import Image from "next/image"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

العلامات

v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
examples/krds/scroll-area-rtl.tsx
"use client"

import * as React from "react"

API 참조

Radix UI Scroll Area 문서를 참고하세요.