Avatar / Logo

联系人、成员列表头像 RdAvatar（按姓名哈希配色）；品牌 RdLogo 支持折叠态 / 展开态图片（iconSrc / fullSrc，默认为内置 svg）。

基础用法

尺寸 sm / md / lg；形状 rounded / circle。

A

B

C

<script setup lang="ts">
import { RdAvatar, RdLogo } from '@rd-element/ui'
</script>

<template>
  <div class="flex items-center gap-3">
    <RdAvatar name="Alice" size="sm" />
    <RdAvatar name="Bob" />
    <RdAvatar name="Carol" size="lg" shape="circle" />
    <RdLogo />
  </div>
</template>

API

RdAvatar Attributes

属性名	说明	类型	默认值
name	姓名；用于首字与配色	string	—
size	尺寸	'sm' | 'md' | 'lg'	'md'
shape	形状	'rounded' | 'circle'	'rounded'
color	自定义底色；不传则按 name 哈希	string	—

RdLogo Attributes

属性名	说明	类型	默认值
collapsed	true 时仅图标	boolean	false
iconSrc	折叠态图片地址；默认内置 logo-icon.svg	string	内置 logo-icon
fullSrc	展开态图片地址；默认内置 logo-full.svg	string	内置 logo-full