Avatar 头像

基本用法

可以通过 src 属性设置头像链接。

<Avatar src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

设置头像样式

可以通过 class 属性设置头像样式。

<Avatar class="w-32 rounded-none" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

<Avatar class="w-32 rounded" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

<Avatar class="w-20 rounded" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

<Avatar class="w-20 rounded-2xl" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

<Avatar class="w-16 rounded" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

<Avatar class="w-16 rounded-full" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

<Avatar class="w-16 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

设置头像组

当 type 属性为 group 时设置为头像组模式，同时必须设置属性 imgList 传入数据。

<Avatar type="group" imgList={[
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
]}/>

自定义头像组样式

当 type 属性为 group 时设置为头像组模式，通过 groupClass 属性传入需要的class。

<Avatar type="group" groupClass="-space-x-0" imgList={[
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
]}/>

设置带计数的头像组

当 type 属性为 group 时设置为头像组模式，同时必须设置属性 imgList 传入路径数组，并通过 counter 属性传入计数。

99+

<Avatar type="group" counter={100} imgList={[
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
  "https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg",
]}/>

带有存在指示器的头像

可以通过 indicator 属性设置存在的状态指示器。

<Avatar indicator="online" class="rounded-full" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
<Avatar indicator="offline" class="rounded-full" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />

文字头像

可以通过 isText 属性设置是否是文字头像。

Avatar

AI

aaa

bbb

ccc

ddd

<Avatar isText={true} class="rounded-full" src="Avatar" />
<Avatar isText={true} class="rounded-full" src="AI" />
<Avatar textClass="text-white" type="group" isText={true} imgList={[
  {src: "aaa"},
  {src: "bbb"},
  {src: "ccc"},
  {src: "ddd"},
]}/>

API

属性	说明	类型	默认值
src	头像链接, 当 isText 为 true 时，src 为头像显示的文字	string	-
type	头像类型, 可选值: ‘item’， ‘group’;	Enum	item
imgList	头像组数据（type 为 group 时生效）	Array	[]
class	头像自定样式，（type 为 group 时将为所有头像添加此样式）	string	-
groupClass	头像组父标签自定样式，（type 为 group 生效）	string	-
counter	图像组的计数内容，当大于99时显示99+（type 为 group 时生效）	number	-
indicator	头像存在指示器状态， 可选值: ‘online’， ‘offline’	Enum	-
isText	是否是文字头像	boolean	false
textClass	文字头像中文字的自定样式 （isText 为 true 时生效）	string	-

Avatar.imgList

属性	说明	类型	默认值
src	单个头像链接, 当 isText 为 true 时，src 为头像显示的文字	string	-
class	单个头像自定样式	string	-
indicator	单个头像存在指示器状态， 可选值: ‘online’， ‘offline’	Enum	-