Yugen UI

Popover

Popover hiển thị nội dung nổi, có thể tương tác, gắn với một phần tử kích hoạt.

Khác Tooltip, Popover mở bằng click và chứa được nút, form ngắn. Bề mặt dùng chung popoverSurfaceClass (shadow-16, rounded-medium) với HoverCard, Combobox, DatePicker.

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 { Popover, PopoverTrigger, PopoverSurface, PopoverClose } 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

normal (mặc định), brand cho teaching/onboarding, inverted.

Form ngắn

Chỉnh nhanh một giá trị mà không mở Dialog.

Cách dùng

Nên
  • Giữ nội dung ngắn gọn, tập trung một nhiệm vụ.
  • Có cách đóng rõ ràng (nút, Esc, click ra ngoài).
Không nên
  • Không đặt form dài hoặc nhiều bước — dùng Dialog/Drawer.
  • Không dùng Popover cho chú thích thuần — dùng Tooltip.

Props

Prop · KiểuMặc địnhMô tả
Popover.open / onOpenChangeboolean / (open) => voidMặc định: —Điều khiển trạng thái.
PopoverSurface.size"small" | "medium" | "large"Mặc định: "medium"Padding 8 / 16 / 20px.
PopoverSurface.appearance"normal" | "brand" | "inverted"Mặc định: "normal"Màu bề mặt.
PopoverSurface.withArrowbooleanMặc định: falseHiện mũi tên.
PopoverSurface.material"glass" | "glass-clear"Mặc định: —Yugen Labs — bề mặt glass (mũi tên cùng màu), mọc ra từ nút mở khi mở.
PopoverSurface.side / alignRadixMặc định: "bottom" / "center"Vị trí so với trigger.