Avatar
Avatar là component giúp hiển thị hình đại diện của người dùng.
Avatar Components
Nhóm các component liên quan:
- Avatar - avatar element
- AvatarGroup - avatar group
Avatar Properties
<Avatar/> properties
| 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 |
| Children | string | Có thể truyền vào children dưới dạng string chữ cái của tên người dùng, tại đây dựa vào children sẽ random ra màu sắc của avatar | |
| avatarColor | 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 |
<AvatarGroup/> properties
| Prop | Type | Default | Description |
|---|---|---|---|
| maxCounter | 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 |
Avatar Events
<Avatar/> events
| Event | Mô tả |
|---|---|
| onClick | Event sẽ khích hoạt khi người dùng click vào avatar |
<AvatarGroup/> events
| Event | Mô tả |
|---|---|
| onCounterClick | 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!