Avatar
import { Avatar } from "zmp-ui";
Dùng để hiển thị ảnh đại diện của người dùng, hỗ trợ dạng hình tròn và fallback khi không có ảnh.
Ví dụ
Bảng thuộc tính
| Property | Type | Required | Description |
|---|---|---|---|
| online | boolean | No | Hiển thị trạng thái online của Avatar (default: false) |
| story | StoryStatus | No | Nhận các giá trị: `default`, `seen` |
| size | number | No | Kích thước avatar |
| src | string | No | `src` cho thẻ `img` của avatar |
| backgroundColor | 'BLUE-BLUELIGHT' | 'PURPLE-BLUE' | 'SKYBLUE-GREEN' | 'GREEN-GREENLIGHT' | No | Màu nền của avatar. Các giá trị hợp lệ bao gồm: - `BLUE-BLUELIGHT`: Màu xanh dương đậm - `PURPLE-BLUE`: Màu tím-xanh dương - `SKYBLUE-GREEN`: Màu xanh da trời nhạt-xanh lá cây - `GREEN-GREENLIGHT`: Màu xanh lá cây đậm-xanh lá cây nhạt Nếu không được chỉ định trước và Avatar là string thì giá trị sẽ được tính toán trước dựa trên nội dung Avatar. |
| blocked | boolean | No | Trạng thái block của avatar. Nếu có giá trị là true, avatar sẽ hiển thị trạng thái bị khóa. (default: false) |
| onClick | React.MouseEventHandler | No | Callback được gọi khi người dùng nhấn chuột vào avatar. |
| children | React.ReactNode | No |