BreezeUI
  • 简体中文

    • 头像 Avatar

    用于代表用户或实体的图像元素。

    组件特性

    • 📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl 多种尺寸规格。
    • 🔲 多种形状：支持圆形、方形、圆角矩形三种形状。
    • 👥 头像组：使用 BrAvatarGroup 组件将多个头像堆叠展示。
    • 🏷️ 头像徽标：支持在头像上显示状态徽标（在线/离线/忙碌/离开）。
    • 🖼️ 回退机制：图片加载失败时自动显示回退内容。
    • 🎨 主题定制：支持自定义边框样式。

    基础用法

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrAvatar>
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Radix" alt="@radix-vue" />
      <BrAvatarFallback>RV</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>CN</BrAvatarFallback>
    </BrAvatar>
  </div>
</template>

    尺寸

    使用 size 属性来控制头像的大小。

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4 flex-wrap">
    <BrAvatar size="xs">
      <BrAvatarFallback>XS</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="sm">
      <BrAvatarFallback>SM</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="md">
      <BrAvatarFallback>MD</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="lg">
      <BrAvatarFallback>LG</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="xl">
      <BrAvatarFallback>XL</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="2xl">
      <BrAvatarFallback>2XL</BrAvatarFallback>
    </BrAvatar>
  </div>
</template>

    形状

    使用 shape 属性来控制头像的形状。

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrAvatar shape="circle">
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Radix" alt="@radix-vue" />
      <BrAvatarFallback>CI</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar shape="rounded">
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Vue" alt="@vue" />
      <BrAvatarFallback>RO</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar shape="square">
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Vite" alt="@vite" />
      <BrAvatarFallback>SQ</BrAvatarFallback>
    </BrAvatar>
  </div>
</template>

    头像组

    使用 BrAvatarGroup 组件将多个头像堆叠在一起。

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback, BrAvatarGroup } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrAvatarGroup :max="3">
      <BrAvatar v-for="i in 5" :key="i">
        <BrAvatarImage :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`" />
        <BrAvatarFallback>U{{ i }}</BrAvatarFallback>
      </BrAvatar>
    </BrAvatarGroup>
    
    <BrAvatarGroup size="sm" :max="4">
      <BrAvatar v-for="i in 10" :key="i">
        <BrAvatarFallback>U{{ i }}</BrAvatarFallback>
      </BrAvatar>
    </BrAvatarGroup>
  </div>
</template>

    头像徽标

    使用 BrAvatarBadge 组件显示状态徽标。

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback, BrAvatarBadge } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrAvatar>
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Radix" alt="@radix-vue" />
      <BrAvatarFallback>RV</BrAvatarFallback>
      <BrAvatarBadge status="online" />
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>CN</BrAvatarFallback>
      <BrAvatarBadge status="busy" position="top-right" />
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>AB</BrAvatarFallback>
      <BrAvatarBadge status="offline" position="bottom-left" />
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>XY</BrAvatarFallback>
      <BrAvatarBadge status="away" position="top-left" />
    </BrAvatar>
  </div>
</template>

    API

    BrAvatar

    Props

    属性名类型默认值说明
    sizestring'md'尺寸变体：xs, sm, md, lg, xl, 2xl
    shapestring'circle'形状变体：circle, square, rounded
    borderedbooleanfalse是否显示边框

    BrAvatarImage

    Props

    属性名类型说明
    srcstring图片源地址
    altstring图片替代文本

    BrAvatarFallback

    Props

    属性名类型说明
    delayMsnumber显示回退内容前的延迟（毫秒）

    BrAvatarGroup

    Props

    属性名类型默认值说明
    maxnumber-最大显示的头像数量
    sizestring'md'组内头像的尺寸
    shapestring'circle'组内头像的形状
    borderedbooleantrue是否显示头像边框

    BrAvatarBadge

    Props

    属性名类型默认值说明
    statusstring'online'状态：online, offline, busy, away
    positionstring'bottom-right'徽标位置：top-right, bottom-right, top-left, bottom-left