Chuyển tới nội dung chính
ZZalo Platforms

Avatar

Cập nhật lần cuối:

Component hiển thị user avatar

Properties​

Avatar​

Avatar.Group​

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;