Yugen UI

ScrollArea

ScrollArea thay thanh cuộn mặc định của trình duyệt bằng thanh cuộn mảnh kiểu Fluent, chỉ hiện khi rê chuột.

Dựa trên Radix Scroll Area nên vẫn giữ cuộn gốc (bánh xe, cảm ứng, bàn phím). orientation chọn thanh cuộn dọc, ngang hoặc cả hai.

Phiên bản

v2.30.0
v2.29.0
v2.28.0
v2.27.0
v2.26.0
v2.25.0
v2.24.0
v2.23.0
v2.22.0
v2.21.0
v2.20.0
v2.19.0
v2.18.0
v2.17.0
v2.16.0
v2.15.0
v2.14.0
v2.13.0
v2.12.0
v2.11.0
v2.10.0
v2.9.0
v2.8.0
v2.7.0
v2.6.0
v2.5.0
v2.4.0
v2.3.0
v2.2.0
v2.1.0

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { ScrollArea, ScrollBar } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Mountains at dawn
Mountains at dawn
Hills at sunset
Hills at sunset
Pine forest
Pine forest
Lake at night
Lake at night
Desert
Desert

Ngang

orientation="horizontal" cho dải thẻ / ảnh.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

Cả hai chiều

orientation="both" cho lưới lớn hơn khung.

Cách dùng

Nên
  • Đặt chiều cao / rộng cố định cho ScrollArea để vùng cuộn rõ ràng.
  • Dùng cho panel, danh sách dài trong bề mặt nhỏ (Popover, Card, Drawer).
Không nên
  • Không bọc cả trang trong ScrollArea — để trình duyệt cuộn trang.
  • Không lồng nhiều vùng cuộn cùng chiều trong nhau.

Props

Prop · KiểuMặc địnhMô tả
orientation"vertical" | "horizontal" | "both"Mặc định: "vertical"Thanh cuộn hiển thị.
type"hover" | "scroll" | "auto" | "always"Mặc định: "hover"Khi nào hiện thanh cuộn (Radix).
viewportClassNamestringMặc định: —Class cho viewport bên trong.
ScrollBar.orientation"vertical" | "horizontal"Mặc định: "vertical"Dùng khi tự ghép Radix primitive.