Avatar
Component hiển thị user avatar
Properties
Avatar
| Name | Type | Default | Description |
|---|---|---|---|
| online | boolean | false | Hiển thị trạng thái online của Avatar |
| story | string | Nhận các giá trị: default, seen | |
| size | number | Kích thước avatar | |
| src | string | src cho thẻ img của avatar | |
| backgroundColor | GradientVariants | Màu nền của avatar. Nhận các giá trị: BLUE-BLUELIGHT, PURPLE-BLUE, SKYBLUE-GREEN, GREEN-GREENLIGHT. 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 | Hiển thị trạng thái block của Avatar | |
| onClick | MouseEventHandler | Event click vào Avatar | |
| children | React.ReactNode | ReactNode |
Avatar.Group
| Name | Type | Default | Description |
|---|---|---|---|
| maxCounter | number | Số lượng Avatar tối đa có thể hiển thị trong group | |
| horizontal | boolean | Hiển thị các Avatar dạng ngang | |
| onCounterClick | MouseEventHandler | Sự kiện click vào counter | |
| children | React.ReactNode | ReactNode |
Example
import React from "react";
import { Avatar, Text, Box, Page } from "zmp-ui";
const { Group } = Avatar;
function AvatarPage() {
return (
<>
<Text.Title size="small">Size</Text.Title>
<Box flex mt={6} className="avatar-scroll-sections">
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">16px</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">24px</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">32x</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">40px</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">48px</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">64px</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column" alignItems="center">
<Box>
<Text size="xxSmall">80px</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
</Box>
<Text.Title size="small">Variation</Text.Title>
<Box flex flexWrap>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Group 1</Text>
</Box>
<Box mt={2}>
<Group maxCounter={1}>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Group 2</Text>
</Box>
<Box mt={2}>
<Group maxCounter={2}>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Group 3</Text>
</Box>
<Box mt={2}>
<Group maxCounter={3}>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Group 4</Text>
</Box>
<Box mt={2}>
<Group>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Group 4+</Text>
</Box>
<Box mt={2}>
<Group>
</Group>
</Box>
</Box>
</Box>
<Box flex flexWrap>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">
Group 2
<br />
Horizontal
</Text>
</Box>
<Box mt={2}>
<Group maxCounter={2} horizontal>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">
Group 3
<br />
Horizontal
</Text>
</Box>
<Box mt={2}>
<Group maxCounter={3} horizontal>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">
Group 4
<br />
Horizontal
</Text>
</Box>
<Box mt={2}>
<Group horizontal>
</Group>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">
Group 4+
<br />
Horizontal
</Text>
</Box>
<Box mt={2}>
<Group horizontal>
</Group>
</Box>
</Box>
</Box>
<Text.Title size="small">Add-on</Text.Title>
<Box flex mt={6} flexWrap>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Online</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Online + Story</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Online + Story Seen</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
<Box mt={6} mr={6} flex flexDirection="column">
<Box>
<Text size="xxSmall">Blocked</Text>
</Box>
<Box mt={2}>
</Box>
</Box>
</Box>
</>
);
}
export default AvatarPage;