Yugen UI

Tabs

TabList chuyển đổi giữa các khung nội dung cùng cấp mà không rời trang.

Tab đang chọn được đánh dấu bằng chữ đậm và thanh brand 3px ở đáy; hover hiện thanh xám.
Bạn có 3 thư chưa đọc.

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 { Tabs, TabsList, TabsTrigger, TabsContent } 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.

Appearance subtle

Có nền khi hover — dùng trên thanh công cụ.

Kích thước

small, medium (mặc định), large.

Dọc

orientation="vertical" cho điều hướng phụ trong trang cài đặt.

Cách dùng

Nên
  • Nhãn tab ngắn (1–2 từ).
  • Giữ tối đa ~6 tab trên một hàng.
Không nên
  • Không dùng Tabs cho các bước tuần tự — dùng wizard/stepper.
  • Không lồng Tabs trong Tabs.

Props

Prop · KiểuMặc địnhMô tả
Tabs.defaultValue / valuestringMặc định: —Tab đang chọn.
Tabs.orientation"horizontal" | "vertical"Mặc định: "horizontal"Hướng.
TabsList.appearance"transparent" | "subtle"Mặc định: "transparent"Nền khi hover.
TabsList.size"small" | "medium" | "large"Mặc định: "medium"Kích thước tab.
TabsList.material"glass" | "glass-clear"Mặc định: —Yugen Labs — thanh tab nổi bằng glass; tab đang chọn là nền bo tròn.
TabsList.minimizedbooleanMặc định: falseTab có icon chỉ còn icon (tên vẫn đọc được, hiện lại khi focus). Dùng với useScrollMinimize({ target?, threshold?, topOffset? }).
TabsTrigger.iconReactNodeMặc định: —Icon trước nhãn (tô màu brand khi active).