Avatar
Cú pháp
<zmp-avatar>, <zmp-avatar-group>
Component Avatar giúp hiển thị hình đại diện của người dùng. Đối với các nhóm người dùng, ta có thể sử dụng component AvatarGroup giúp dễ dàng bọc các avatar lại trong một khối.
Avatar
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| online | boolean | false | Hiện trạng thái của người dùng đang online hay không |
| story | boolean | false | Hiện border biểu thị người dùng có story |
| size | number | Kích thước avatar, các giá trị hợp lệ: 24, 48, 56, 96, 120 đơn vị px, mặc định kích thước avatar là 48 | |
| src | string | file | Đường dẫn đến file hình làm avatar |
| avatar-color | string | Khi không có hình avatar (src để trống), có thể đặt màu nền cho avatar dưới dạng tên các loại background. Tên hợp lệ: blue-lblue, green-lgreen, orange-red, pink-lpurple, lblue-teal, lgreen-yellow, purple-blue, pink-lpink, teal-green, yellow-orange, lpurple-purple, lred-lpink |
Slots
| Slot | Mô tả |
|---|---|
| default | Có thể truyền vào default slot chữ cái của tên người dùng, dựa vào đây component avatar sẽ random ra màu sắc của ảnh đại diện |
Events
| Event | Mô tả |
|---|---|
| @click | Event sẽ khích hoạt khi người dùng click vào avatar |
AvatarGroup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| max-counter | number | 3 | Số lương avatar sẽ hiển thị trong nhom các avatar |
| horizontal | boolean | Chuyển bố cục nhóm các avatar sang hướng ngang |
Events
| Event | Mô tả |
|---|---|
| @counter-click | Event sẽ kích hoạt khi người dùng click vào counter của nhóm avatar |
Ví dụ
Code demo fallback when rendering server side!