Avatar

Cập nhật lần cuối: 27/05/2022

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
total	number		cho phép đặt tổng số lượng avatar 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

Open Sandbox

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;