zilly-ui/src/avatar/avatar.mdx

Zilly web react ui components

---
name: Avatar
---

import { Playground, Props, } from "docz";
import  Avatar  from "./avatar";
import { Theming } from '../';
 

# Avatar
Avatars can be used to represent people or objects. It supports images, Icons.

## Props

|Property | Description | Type | Default |
:---|:---|:---|:---|
|shape|  the shape of avatar | circle \| square |  circle|
|size|  the size of the avatar| number \| string: large small default| default|
|src|  the address of the image for an image avatar | string |  - |
|srcSet|  a list of sources to use for different screen resolutions | string |  - |
|alt|  This attribute defines the alternative text describing the image | string |  - |
|onError|  handler when img load error, return false to prevent default fallback behavior | () => boolean |  - |
|onClick|  handler when img click | (event)=>void |  - |

<Props of={Avatar} />

## Basic usage
Three sizes and two shapes are available.
<Playground>
    <Avatar         
        style={{background:'red'}}
        mr={2}
        size="small"
    />
    <Avatar         
        style={{background:'red'}}
        mr={2}
        
    />
    <Avatar         
        style={{background:'red'}}
        mr={30}
        size="large"
    />
    <Avatar         
        style={{background:'red'}}
        mr={2}
        shape="square"
        size="small"
    />
    <Avatar         
        style={{background:'red'}}
        mr={2}
        shape="square"
        
    />
    <Avatar         
        style={{background:'red'}}
        mr={2}
        shape="square"
        size="large"
    />
</Playground>

## Set image 

Image, Icon are supported, and the latter two kinds of avatar can have custom colors and background colors. you can also set background-color;
<Playground>
    <Avatar         
        style={{background:'red'}}
        mr={2}
         size="small"
        src={"https://avatars1.githubusercontent.com/u/21330858?s=40&v=4"}
    />
    <Avatar         
        style={{background:'red'}}
         src={"https://avatars1.githubusercontent.com/u/21330858?s=40&v=4"}
        mr={2}
        
    />
    <Avatar         
        style={{background:'red'}}
        mr={30}
       
         src={"https://avatars1.githubusercontent.com/u/21330858?s=40&v=4"}
        size="large"
    >hello</Avatar>
    <Avatar         
        style={{background:'gray'}}
        mr={30}
        shape="square"
        
        size="large"
    >hello</Avatar>
</Playground>

## Add click handle
<Playground>
      <Avatar         
        style={{background:'gray'}}
        mr={30}
        shape="square"
        onClick={() => alert("hello")}
        size="large"
    >hello</Avatar>
</Playground>