Home›Docs›Data›Avatar Component

Avatar Component

Last updated: 1 month ago

Category: Data

The AVATAR tag can create both image-based avatars and text-based avatar placeholders. It supports attributes including theme, tips, size, and shape for customization.

Avatar Component1 month ago

Introduction

The avatar component integrates elements related to user avatars, including images, tooltip text, badges, etc.

Basic Usage

The src attribute is the core property of the component, typically containing the image URL. There are two ways to create the src attribute:

Using the src attribute on the element
Directly adding the avatar URL inside the element

Output
HTML

https://unpkg.com/orcares/image/avatar02.jpg
```
                
                
            
```

Text Avatars

When the avatar image is unknown, use the type=text attribute to display the avatar as plain text. In this case, the src attribute should contain plain text.

Output
HTML

YI
```
                
                
            
```

Text Avatar Colors

When using type=text, the default appearance is black text on a gray background. The theme color can be changed using the theme attribute.

Shape

Avatars have small rounded corners by default (1/4 of their size). The shape attribute controls the avatar's outline.

Available values: square and round.

Output
HTML

https://unpkg.com/orcares/image/avatar01.jpg https://unpkg.com/orcares/image/avatar02.jpg
```
                
                
            
```

Using Badges

The badge attribute adds a badge effect in the top-right corner of the avatar.

Using Arrow Indicators

Avatars don't have arrow indicators by default. Add the arrow attribute to display an arrow on the right side.

Output
HTML

https://unpkg.com/orcares/image/avatar01.jpg
```
                
                
            
```

Sizes

Control avatar size with the size attribute. Available values:

xxs: 2.4rem
xs: 3.2rem
sm: 4.0rem
md: 3.2*2rem
lg: 3.2*3rem
xl: 3.2*4rem
xxl: 3.2*5rem

Output
HTML

https://unpkg.com/orcares/image/avatar01.jpg https://unpkg.com/orcares/image/avatar02.jpg https://unpkg.com/orcares/image/avatar03.jpg
```
                
                
            
```

Using Tooltips

The tips attribute adds overlay text to the avatar, supporting any HTML content.

Default Avatar

When the src value is empty, a default avatar will be displayed.

Operations

An example demonstrating manual modification of avatar properties.

Attributes

Name	Values	Default	Description
type	'text'/'image'	'image'	Avatar type - default is image, can choose text for plain text
theme	'prim[-lt]'/'error[-lt]'/'succ[-lt]'/'info[-lt]'/ 'warn[-lt]'/'issue[-lt]'/'text[-lt]'	-	Theme color, only affects type=text, use -lt suffix for light background
tips	Any HTML text	-	Overlay tooltip text - empty means no display
shape	'radius'/'square'/'round'	'radius'	Outline shape - default small rounded corners, can choose square or round
badge	Any plain text	-	Whether to show badge dot - default disabled
disabled	''	-	Whether disabled (non-clickable)
arrow	'outside'/'inside'/''	'outside'	Whether to show indicator arrow - outside positions absolutely, inside inserts as content after avatar
src	''	-	Avatar image or text
href	-	-	Avatar hyperlink
target	'_blank'/'_self'	-	Hyperlink target
rel	'nofollow'/'canonical‌'/'ugc'	-	Hyperlink rel attribute

Common Methods

Common component methods:

set: Set properties (takes key-value pairs or array)
reset: Reset properties (no params)
clear: Clear properties and values (no params)

Basic usage: CompElem.reset()

Common Events

Common component events:

connected: Component connected (no params)
disconnected: Component disconnected (no params)
adopted: Component moved (no params)
set: Property set (receives value)
cleared: Property cleared (no params)
reset: Property reset (no params)

Basic usage: CompElem.on('connected',()=>{console.log('connected')})

Tags: Native, Vanilla, Web Components

CSS Breadcrumb

1 month ago

Badge Component