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 { Page, Avatar } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
            <Avatar size={98} online story="default">
                D
            </Avatar>
        </Page>
    );
}

import React from "react";
import { Page, Avatar } from "zmp-ui";

function HomePage(props){
    return (
       <Page>
            <Avatar.Group maxCounter={1}>
                <Avatar story="default" online>A</Avatar>
                <Avatar story="seen" online>B</Avatar>
                <Avatar story="seen" online>c</Avatar>
                <Avatar story="seen" online>D</Avatar>
            </Avatar.Group>
       </Page>
    );
}