Avatar
Component hiển thị user avatar
Properties
Avatar
| Name | Type | Default | Description |
|---|---|---|---|
| backgroundColor | 'BLUE-BLUELIGHT' | 'PURPLE-BLUE' | 'SKYBLUE-GREEN' | 'GREEN-GREENLIGHT' | Màu nền của avatar. Các giá trị hợp lệ bao gồm:
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 | false | 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. |
| online | boolean | false | Hiển thị trạng thái online của Avatar |
| size | number | Kích thước avatar | |
| src | string |
| |
| story | StoryStatus | Nhận các giá trị: | |
| onClick | React.MouseEventHandler | Callback được gọi khi người dùng nhấn chuột vào avatar. |
Avatar.Group
| Name | Type | Default | Description |
|---|---|---|---|
| horizontal | boolean | false | Hiển thị các avatar dưới dạng ngang. Mặc định các avatar trong group sẽ được hiển thị dưới dạng lưới, trừ khi số lượng nhiều hơn 4 avatar. |
| maxCounter | number | 3 | Số lượng avatar tối đa có thể hiển thị trong group.
Nếu như số lượng avatar trong group nhiều hơn |
| total | number | children.length | Giả lập số lượng avatar trong group.
Ví dụ: bạn cần hiển thị 3 avatar đầu tiên, sau đó là |
| onCounterClick | React.MouseEventHandler | Callback được gọi khi người dùng nhấn chuột vào counter.
Counter là phần tử cuối cùng trong group được hiển thị với nội dung |
Example
import React from "react"; import { Avatar, Text, Box, Page } from "zmp-ui"; const { Group } = Avatar; function AvatarPage() { return ( <> <Page className="section-container"> <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}> <Avatar size={16} /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column" alignItems="center"> <Box> <Text size="xxSmall">24px</Text> </Box> <Box mt={2}> <Avatar size={24} /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column" alignItems="center"> <Box> <Text size="xxSmall">32x</Text> </Box> <Box mt={2}> <Avatar size={32} /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column" alignItems="center"> <Box> <Text size="xxSmall">40px</Text> </Box> <Box mt={2}> <Avatar size={40} /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column" alignItems="center"> <Box> <Text size="xxSmall">48px</Text> </Box> <Box mt={2}> <Avatar size={48} /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column" alignItems="center"> <Box> <Text size="xxSmall">64px</Text> </Box> <Box mt={2}> <Avatar size={64} /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column" alignItems="center"> <Box> <Text size="xxSmall">80px</Text> </Box> <Box mt={2}> <Avatar size={80} /> </Box> </Box> </Box> </Page> <Page className="section-container"> <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}> <Avatar /> <Avatar /> </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}> <Avatar /> <Avatar /> </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}> <Avatar /> <Avatar /> <Avatar /> </Group> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column"> <Box> <Text size="xxSmall">Group 4</Text> </Box> <Box mt={2}> <Group> <Avatar /> <Avatar /> <Avatar /> <Avatar /> </Group> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column"> <Box> <Text size="xxSmall">Group 4+</Text> </Box> <Box mt={2}> <Group> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> </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> <Avatar /> <Avatar /> </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> <Avatar /> <Avatar /> <Avatar /> </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> <Avatar /> <Avatar /> <Avatar /> <Avatar /> </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> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> <Avatar /> </Group> </Box> </Box> </Box> </Page> <Page className="section-container"> <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}> <Avatar online /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column"> <Box> <Text size="xxSmall">Online + Story</Text> </Box> <Box mt={2}> <Avatar online story="default" /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column"> <Box> <Text size="xxSmall">Online + Story Seen</Text> </Box> <Box mt={2}> <Avatar online story="seen" /> </Box> </Box> <Box mt={6} mr={6} flex flexDirection="column"> <Box> <Text size="xxSmall">Blocked</Text> </Box> <Box mt={2}> <Avatar blocked /> </Box> </Box> </Box> </Page> </> ); } export default AvatarPage;