🌏 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

AvatarSlots

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