Yugen UI

TeachingPopover

TeachingPopover giới thiệu tính năng mới hoặc hướng dẫn từng bước, gắn ngay cạnh phần tử liên quan.

Dựng trên Popover (shadow-16, có mũi tên). Gồm Header (icon + tiêu đề nhỏ + nút đóng), Body (ảnh minh hoạ tuỳ chọn, tiêu đề, nội dung), Footer (nút chính + nút phụ) và Carousel cho nhiều bước ("1/3", chấm điều hướng, Quay lại / Tiếp / Hoàn tất). appearance="brand" phủ nền brand cho bề mặt nhỏ này.

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 {  TeachingPopover, TeachingPopoverTrigger, TeachingPopoverSurface, TeachingPopoverHeader,  TeachingPopoverBody, TeachingPopoverTitle, TeachingPopoverFooter, TeachingPopoverCarousel,} 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.

Brand & ảnh minh hoạ

appearance="brand" trên TeachingPopover; media hiển thị phía trên nội dung.

Footer dọc

orientation="vertical" xếp hai nút rộng hết bề mặt — hợp với nhãn dài.

Nhiều bước (Carousel)

Mỗi phần tử con của TeachingPopoverCarousel là một bước; bước đầu có "Để sau", bước cuối "Hoàn tất".

Cách dùng

Nên
  • Chỉ hiện một TeachingPopover tại một thời điểm, gắn với đúng phần tử được giới thiệu.
  • Tiêu đề ngắn, nội dung 1–2 câu; luôn có cách đóng (nút X hoặc nút phụ).
  • Giới hạn hướng dẫn nhiều bước ở 3–5 bước.
Không nên
  • Không dùng cho thông báo lỗi hay xác nhận — dùng MessageBar / Dialog.
  • Không tự bật lại sau khi người dùng đã bỏ qua.
  • Không đặt form hay nội dung dài trong bề mặt.

Props

Prop · KiểuMặc địnhMô tả
TeachingPopover.appearance"normal" | "brand"Mặc định: "normal"Áp cho bề mặt, header, nút.
TeachingPopover.open / onOpenChangeboolean / (open) => voidMặc định: —Điều khiển hiển thị (Radix Popover).
TeachingPopoverSurface.side / align / withArrowPopover propsMặc định: withArrow = trueVị trí bề mặt (rộng 320px).
TeachingPopoverHeader.icon / dismissibleReactNode / booleanMặc định: bóng đèn / trueIcon trước tiêu đề; nút đóng.
TeachingPopoverBody.mediaReactNodeMặc định: —Ảnh minh hoạ phía trên.
TeachingPopoverFooter.primary / secondaryReactNodeMặc định: —Nhãn hai nút; nút phụ đóng popover.
TeachingPopoverFooter.closeOnPrimary / orientationboolean / "horizontal" | "vertical"Mặc định: —Đóng khi bấm nút chính; hướng xếp nút. Tên cũ layout đã lỗi thời (bỏ ở 1.0).
TeachingPopoverCarousel.step / defaultStep / onStepChangenumberMặc định: —Bước hiện tại (bắt đầu từ 0).
TeachingPopoverCarousel.onFinish / *Label() => void / stringMặc định: —Bấm Hoàn tất; đổi nhãn Tiếp / Quay lại / Hoàn tất / Để sau.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.teachingPopover

Khoá · KiểuMặc định (tiếng Anh)messagesVi
closestring

aria-label nút X của TeachingPopoverHeader.

Mặc định (tiếng Anh)"Close"messagesVi"Đóng"
nextstring

Nút của TeachingPopoverCarousel.

Mặc định (tiếng Anh)"Next"messagesVi"Tiếp"
previousstringMặc định (tiếng Anh)"Back"messagesVi"Quay lại"
finishstringMặc định (tiếng Anh)"Finish"messagesVi"Hoàn tất"
laterstring

Nút phụ ở bước đầu (đóng popover).

Mặc định (tiếng Anh)"Not now"messagesVi"Để sau"
stepRoleDescriptionstring

aria-roledescription của từng bước.

Mặc định (tiếng Anh)"step"messagesVi"bước"
step(current: number, count: number) => string

Tên bước hiện tại; current đếm từ 1.

Mặc định (tiếng Anh)(current, count) => `Step ${current} of ${count}`messagesVi(current, count) => `Bước ${current}/${count}`
goToStep(index: number) => string

aria-label chấm điều hướng; index đếm từ 1.

Mặc định (tiếng Anh)(index) => `Go to step ${index}`messagesVi(index) => `Đến bước ${index}`