Avatar 头像

用于展示头像的组件。

基本用法

通过 image 属性传入头像地址，如果链接失效或不传入链接会显示默认用户图标：

<template>
  <div className="idesign-demo-block-row">
    <i-avatar image="https://picsum.photos/180/120" />
    <i-avatar image="https://picsum123.photos/180/120" />
    <i-avatar />
  </div>
</template>

自定义头像内容

通过子节点自定义头像内容：

<template>
  <i-avatar>L</i-avatar>
</template>

自定义头像大小

通过 size 属性控制头像大小：

<template>
  <div className="idesign-demo-block-row">
    <i-avatar :size="24">L</i-avatar>
    <i-avatar :size="32">L</i-avatar>
    <i-avatar :size="40">L</i-avatar>
  </div>
</template>

自定义头像形状

通过 shape 属性控制头像形状：

<template>
  <div className="idesign-demo-block-row">
    <i-avatar shape="circle">L</i-avatar>
    <i-avatar shape="round">L</i-avatar>
  </div>
</template>

自定义头像底色

通过 color 属性控制头像底色：

<template>
  <div className="idesign-demo-block-row">
    <i-avatar color="#3236A4">L</i-avatar>
    <i-avatar color="#8AD2B8">L</i-avatar>
  </div>
</template>

组合头像

可通过 Avatar.Group 包裹为组合头像：

<template>
  <i-avatar-group>
    <i-avatar>L</i-avatar>
    <i-avatar>P</i-avatar>
    <i-avatar>L</i-avatar>
  </i-avatar-group>
</template>

组合折叠方向

可通过 cascading 属性控制组合头像折叠方向：

<template>
  <div className="idesign-demo-block-column">
    <i-avatar-group cascading="right">
      <i-avatar>L</i-avatar>
      <i-avatar>P</i-avatar>
      <i-avatar>L</i-avatar>
    </i-avatar-group>
    <i-avatar-group cascading="left">
      <i-avatar>L</i-avatar>
      <i-avatar>P</i-avatar>
      <i-avatar>L</i-avatar>
    </i-avatar-group>
  </div>
</template>

组合头像透传

Avatar.Group 可透传 size、shape、color 属性，优先级低于单个头像对应的属性：

<template>
  <div className="idesign-demo-block-column">
    <i-avatar-group :size="40" shape="round" color="#5598F7">
      <i-avatar>L</i-avatar>
      <i-avatar>P</i-avatar>
      <i-avatar>L</i-avatar>
    </i-avatar-group>
    <i-avatar-group :size="40" shape="round" color="#5598F7">
      <i-avatar :size="32">L</i-avatar>
      <i-avatar shape="circle">P</i-avatar>
      <i-avatar color="#F0B9B7">L</i-avatar>
    </i-avatar-group>
  </div>
</template>

Avatar Attributes

属性	说明	类型	默认值
image	头像图片地址	`string`	`--`
size	头像大小	`number`	`32`
shape	头像形状	`circle〡round`	`circle`
color	头像底色	`string`	`#c1c4cb`

AvatarGroup Attributes

属性	说明	类型	默认值
size	全局头像大小	`number`	`32`
shape	全局头像形状	`circle〡round`	`circle`
color	全局头像底色	`string`	`#c1c4cb`
cascading	组合折叠方向	`left〡right`	`right`

# Avatar 头像

# 基本用法

# 自定义头像内容

# 自定义头像大小

# 自定义头像形状

# 自定义头像底色

# 组合头像

# 组合折叠方向

# 组合头像透传

# Avatar Attributes

# AvatarGroup Attributes