Card
Card là bề mặt gom nhóm thông tin và hành động liên quan đến một chủ đề duy nhất.
Card trong Fluent 2 dùng elevation (shadow4) thay vì viền để tách khỏi nền. Ghép từ CardHeader, CardPreview, CardContent, CardFooter.
Phạm Minh Dũng đã chia sẻ một tệp
5 phút trước
Kế hoạch ra mắt sản phẩm quý IV — vui lòng xem và góp ý trước thứ Sáu.
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 { Card, CardHeader, CardPreview, CardContent, CardFooter } 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.
Filled
Filled alt
Outline
Subtle
Appearance
filled (mặc định), filled-alternative, outline, subtle.
Cập nhật hôm qua
Interactive
Card bấm được: tăng elevation khi hover. Bọc nội dung trong <a>/<button> để có ngữ nghĩa đúng.
Hệ thống thiết kế
Figma · 12 trang
Với preview
CardPreview tràn sát hai cạnh Card để hiển thị ảnh/thumbnail.
Cách dùng
Nên
- Mỗi Card chỉ nói về một chủ đề.
- Dùng outline khi Card đặt trên nền đã có màu/elevation.
Không nên
- Không lồng Card trong Card.
- Không thêm nhiều hơn 2 Button trong CardFooter.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| appearance"filled" | "filled-alternative" | "outline" | "subtle" | Mặc định: "filled" | Kiểu bề mặt. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Padding & gap 8 / 12 / 16px. |
| interactiveboolean | Mặc định: false | Bật trạng thái hover/pressed. |
| CardHeader | Mặc định: — | Các slot của header. |