头像 Avatar

表示用户的标识。

基础使用

Avatar 组件的内容是空的。

AI

<template>
	<px-space>
		<px-avatar>
			<px-image src="https://picsum.photos/id/114/300/300" alt="Image"></px-image>
		</px-avatar>
		<px-avatar> AI </px-avatar>
		<px-avatar>
			<IconUser></IconUser>
		</px-avatar>
	</px-space>
</template>

<script setup lang="ts">
import { IconUser } from '@pixelium/web-vue/icon-hn/es'
</script>

头像尺寸

size 给头像设置不同尺寸。

<template>
	<px-space>
		<px-avatar size="small">
			<IconUser></IconUser>
		</px-avatar>
		<px-avatar>
			<IconUser></IconUser>
		</px-avatar>
		<px-avatar size="large">
			<IconUser style="font-size: 16px"></IconUser>
		</px-avatar>
		<px-avatar :size="50">
			<IconUser style="font-size: 18px"></IconUser>
		</px-avatar>
	</px-space>
</template>

<script setup lang="ts">
import { IconUser } from '@pixelium/web-vue/icon-hn/es'
</script>

头像形状

头像就可以是圆的，也可以是方的。

<template>
	<px-space>
		<px-avatar shape="square">
			<IconMinds></IconMinds>
		</px-avatar>
		<px-avatar>
			<IconMinds></IconMinds>
		</px-avatar>
	</px-space>
</template>

<script setup lang="ts">
import { IconMinds } from '@pixelium/web-vue/icon-hn/es'
</script>

头像边框

bordered 属性给头像加上边框

<template>
	<px-space>
		<px-avatar>
			<px-image src="https://picsum.photos/id/114/300/300" alt="Image"></px-image>
		</px-avatar>
		<px-avatar bordered>
			<px-image src="https://picsum.photos/id/114/300/300" alt="Image"></px-image>
		</px-avatar>
		<px-avatar shape="square">
			<px-image src="https://picsum.photos/id/114/300/300" alt="Image"></px-image>
		</px-avatar>
		<px-avatar bordered shape="square">
			<px-image src="https://picsum.photos/id/114/300/300" alt="Image"></px-image>
		</px-avatar>
	</px-space>
</template>

API

AvatarProps

属性	类型	可选	默认值	描述	版本
shape	'circle' | 'square''	是	'circle'	头像的形状。	0.0.3
size	'medium' | 'large' | 'small' | number	是	'medium'	头像的尺寸。	0.0.3
bordered	boolean	是	false	头像是否拥有边框。	0.0.3
backgroundColor	string	是		头像背景颜色。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.0.3
borderColor	string	是		头像边框颜色。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.0.3

AvatarSlots

插槽	参数	描述	版本
default		头像内容。	0.0.3