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