Avatar

A nice avatar and with many interesting features

Default

In many cases you have to add the avatar of a user to the application for this we have the component vs-avatar.

To add an internal text value such as Luis use thevs-text property.

TIP

If the text has more than 5 letters, only the first letter will be shown as in the second avatar, the name is Luis Daniel and only the letters LD will be shown if the word contains spaces the initial of each one is added.

person
L
Luisd
LD

Size

You can change the size of the Avatar with the property vs-size the allowed values ​​are:

  • large
  • small
  • Custom measure

TIP

In the example the last avatar has the custom size of 70px the added value will be the avatar's height and width

person
LD

Color

Puedes cambiar el color del Avatar con la propiedad vs-color si es necesario tambien puedes cambiar el color del texto con la propiedad vs-text-color

P
S
D
W
dark
RGB
HEX
HR

With Badge

You can add a notification label to the avatar, either a reference point or a number with the property vs-badge.

Tambien puedes cambiar el color del badge con la propiedad vs-badge-color, puedes usar los colores Principales o los RGB y HEX

WARNING

Only RGB and HEX colors are supported.

person
2
L
10
Luisd

Icon

You can change the main icon of the Avatar with the property vs-icon

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

This icon is only displayed when there is no property as vs-text o vs-src

person
date_range
whatshot
photo_camera
filter_vintage
watch

API #

NameTypeParametersDescriptiondefault
vs-textStringIf the text is very long, only the first letter is added.
vs-srcStringUrl of the image to show in the Avatar.
vs-sizeStringlarge, small, Costom measure (70px)Url of the image to show in the Avatar.32px
vs-colorStringColores Principales, RGB, HEXDefine the color of the Avatar (does not affect the image).rgb(195, 195, 195)
vs-colorStringColores Principales, RGB, HEXDefine the color of the Avatar (does not affect the image).rgb(195, 195, 195)
vs-badgeBoolean, NumberDefine if the badge is active and what is its value in number.
vs-badge-colorStringColores Principales, RGB, HEXDefine the color of the Badge.danger
vs-iconStringMaterial IconsDefine the icon within the Avatar.person