Introduction

The avatar component is used to display user avatars. It supports three types (image, text, icon), multiple sizes, and shapes. You can use the fs-badge component to display a badge indicating status or the number of messages.

Usage

Local import. Configure it in the index.json of the page or component where it is needed:

"usingComponents": {
  "fs-avatar": "ava-ui/fxui/fs-avatar/index"
}

Code Demo

API

Properties

Property	Description	Type	Optional Values	Default
type	Avatar type	string	image/text/icon	image
size	Avatar size	string	small/medium/large	medium
shape	Avatar shape	string	circle/square	circle
src	Image URL (used when type is image)	string	—	''
text	Text content (used when type is text)	string	—	''
icon	Icon name (used when type is icon)	string	—	icon-user
bgColor	Background color (used when type is text or icon)	string	—	#f5f5f5
textColor	Text color (used when type is text or icon)	string	—	#666666
customStyle	Custom style	string	—	''

Size Specifications

The avatar component provides three sizes, so you can choose the appropriate size for different scenarios.

Size	Description	Size (px)	Font Size (px)	Use Cases
small	Small	32	14	List items, comment areas
medium	Medium (default)	48	18	Navigation bar, cards
large	Large	64	24	Profile, detail pages

Badge Feature

The avatar component supports displaying a badge via the fs-badge component. For the properties supported by the fs-badge component, please refer to the fs-badge component documentation.

Events

Event Name	Description	Callback Parameter
click	Triggered when the avatar is clicked	event
error	Triggered when the image fails to load	event
load	Triggered when the image loads successfully	event

Notes

• Supports switching between image, text, and icon types via the type property.
• Supports three sizes via the size property: small (32px), medium (48px), large (64px).
• Supports switching between circle and square shapes via the shape property.
• A text avatar automatically extracts the first two characters or the initial letter: for Chinese, the first two characters are used; for English, the first letter is used.
• An image avatar uses the fs-image component and supports image processing in avatar mode.
• When the image fails to load, the default icon avatar is displayed automatically.
• The badge feature is implemented via the fs-badge component, supporting numeric, text, icon, and red-dot badge types.
• The component automatically computes styles internally, including size, color, and text content.

打开预览