🌏 Translated with the assistance of DeepSeek and ChatGPT

Avatar

Represents a user's identity.

Basic Usage

The Avatar component has empty content.

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>

Avatar Size

Use the size prop to set different avatar sizes.

<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>

Avatar Shape

The avatar can be round or square.

<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>

Avatar Border

The bordered prop adds a border to the avatar.

<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

Attribute	Type	Optional	Default	Description	Version
shape	'circle' | 'square''	True	'circle'	The shape of the avatar.	0.0.3
size	'medium' | 'large' | 'small' | number	True	'medium'	The size of the avatar.	0.0.3
bordered	boolean	True	false	Whether the avatar has a border.	0.0.3
backgroundColor	string	True		The background color of the avatar. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hexadecimal values.	0.0.3
borderColor	string	True		The border color of the avatar. Supports CSS-like strings such as 'rgb(r, g, b)' and 'rgba(r, g, b, a)', as well as 3-, 4-, 6-, and 8-digit hexadecimal values.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This may impact performance. It is typically used to resolve abnormal canvas rendering that occurs when the component's size is affected by its container element.	0.1.0

AvatarSlots

Slot	Parameter	Description	Version
default		The content of the avatar.	0.0.3