Yugen UI

Sonner

Sonner là thông báo ngắn xếp chồng ở góc màn hình: thông báo mới ở trước, thông báo cũ lùi ra sau, trỏ chuột vào thì xoè ra.

Đặt <Sonner /> một lần ở gốc ứng dụng, rồi gọi sonner("…"), sonner.success(…) hoặc sonner.promise(…) ở bất kỳ đâu. Gọi lại với cùng id sẽ thay nội dung tại chỗ. Trỏ chuột hoặc focus vào vùng thông báo thì chồng xoè thành danh sách và tạm dừng đếm giờ; vuốt để đóng; F8 để focus vùng thông báo. Toast vẫn dùng cho một danh sách thông báo cố định theo Fluent.

    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 { Sonner, sonner } 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.

      Loại

      Mặc định không có icon; success, info, warning, error dùng icon của MessageBar; loading không tự đóng.

        Theo một promise

        sonner.promise hiện loading, rồi đổi tại chỗ thành success hoặc error. success / error nhận hàm để dùng kết quả.

          Xếp chồng & xoè

          Tối đa visibleToasts (3) thông báo nhìn thấy; thông báo cũ hơn chờ phía sau. expand giữ chồng luôn xoè.

            Vị trí, richColors & nút đóng

            richColors tô nền và viền theo loại; closeButton thêm nút X; cancel là nút phụ đóng thông báo.

            Cách dùng

            Nên
            • Dùng cho phản hồi ngắn sau thao tác: đã lưu, đã gửi, đã xoá kèm Hoàn tác.
            • Dùng sonner.promise cho thao tác chạy nền để người dùng thấy kết quả mà không phải chờ.
            • Đặt altText cho action khi label không phải chuỗi.
            Không nên
            • Không đặt thông tin quan trọng duy nhất trong thông báo, nó sẽ biến mất.
            • Không đặt cả Toaster và Sonner cùng vị trí trong một app.
            • Không đặt form hay nhiều hơn hai nút trong một thông báo.

            Props

            Prop · KiểuMặc địnhMô tả
            position"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"Mặc định: "bottom-end"Vị trí vùng thông báo; start / end đổi theo chiều đọc.
            expandbooleanMặc định: falseLuôn xoè thành danh sách.
            visibleToastsnumberMặc định: 3Số thông báo nhìn thấy cùng lúc.
            richColorsbooleanMặc định: falseNền và viền theo loại, như MessageBar.
            closeButtonbooleanMặc định: falseNút đóng (X) trên mọi thông báo; từng thông báo có thể ghi đè.
            durationnumberMặc định: 4000Thời gian tự đóng mặc định (ms).
            gapnumberMặc định: 12Khoảng cách khi xoè và phần ló ra khi xếp chồng (px).
            sonnerIdstringMặc định: —Khi có nhiều Sonner: thông báo truyền cùng sonnerId mới hiện ở đây.
            sonner(title, options?)stringMặc định: —Hiện thông báo, trả về id. Có thêm .success, .info, .warning, .error, .loading.
            sonner.promise(promise, data)stringMặc định: —data: { loading, success, error } cùng các tuỳ chọn khác; success / error nhận giá trị hoặc hàm.
            sonner.dismiss(id?)voidMặc định: —Đóng một thông báo, hoặc tất cả khi bỏ trống id.
            SonnerOptions.descriptionReactNodeMặc định: —Dòng mô tả dưới tiêu đề.
            SonnerOptions.action{ label; altText?; onClick? }Mặc định: —Nút chính; gọi event.preventDefault() trong onClick để giữ thông báo mở.
            SonnerOptions.cancel{ label; altText?; onClick? }Mặc định: —Nút phụ, đóng thông báo.
            SonnerOptions.idstringMặc định: —Gọi lại với id của thông báo đang mở để thay nội dung tại chỗ.
            SonnerOptions.iconReactNodeMặc định: —Thay icon theo loại; null = không icon.
            SonnerOptions.durationnumberMặc định: —Ghi đè thời gian tự đóng; Infinity = không tự đóng.
            SonnerOptions.onDismiss(id: string) => voidMặc định: —Người dùng đóng (nút, vuốt, Esc) hoặc gọi sonner.dismiss.
            SonnerOptions.onAutoClose(id: string) => voidMặc định: —Hết thời gian tự đóng.

            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.sonner

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

            Tên vùng thông báo cho trình đọc màn hình.

            		Mặc định (tiếng Anh)"Notifications"messagesVi"Thông báo"
            regionHotkeystring

            Tên vùng kèm phím tắt nhảy tới; {hotkey} được thay bằng phím tắt (F8).

            		Mặc định (tiếng Anh)"Notifications ({hotkey})"messagesVi"Thông báo ({hotkey})"
            dismissstring

            Nhãn nút đóng từng thông báo.

            		Mặc định (tiếng Anh)"Dismiss notification"messagesVi"Đóng thông báo"