Message
MessageBar truyền đạt thông tin quan trọng về trạng thái của toàn bộ trang hoặc một khu vực.
MessageBar tồn tại cho đến khi người dùng đóng hoặc tình huống được giải quyết — khác với Toast tự biến mất.
Đã lưuThay đổi của bạn đã được đồng bộ.
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 { MessageBar } 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.
MẹoNhấn Ctrl+K để tìm nhanh.
Thành côngĐã gửi lời mời.
Chú ýPhiên bản này sắp ngừng hỗ trợ.
LỗiKhông thể kết nối máy chủ.
Intent
info, success, warning, error.
Sắp hết dung lượngBạn đã dùng 95% dung lượng lưu trữ.
Có hành động & đóng
actions cho nút xử lý; onDismiss hiện nút đóng.
Thanh toán thất bạiNgân hàng từ chối giao dịch. Kiểm tra số dư hoặc dùng phương thức thanh toán khác.
Multiline
layout="multiline" khi nội dung dài; actions xuống dòng dưới.
Cách dùng
Nên
- Đặt MessageBar ở đầu khu vực mà nó mô tả.
- Nêu nguyên nhân và cách khắc phục.
Không nên
- Không hiện nhiều hơn 2–3 MessageBar cùng lúc.
- Không dùng intent error cho thông tin trung tính.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| intent"info" | "success" | "warning" | "error" | Mặc định: "info" | Mức độ nghiêm trọng. |
| titleReactNode | Mặc định: — | Tiêu đề đậm. |
| actionsReactNode | Mặc định: — | Nút hành động (size small). |
| onDismiss() => void | Mặc định: — | Hiện nút đóng. |
| layout"singleline" | "multiline" | Mặc định: "singleline" | Bố cục. |
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.messageBar
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| dismissstring Nhãn nút đóng (khi có | Mặc định (tiếng Anh)"Dismiss" | messagesVi"Đóng thông báo" |