A nice avatar and with many interesting features
Often you need to add an user's avatar to your app. In order to make this we have the component
To add an internal text value such as
Luis use the
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.
You can change the size of the Avatar with the property
size the allowed values are:
In the example the last avatar has the custom size of
70px the added value will be the avatar's height and width
You can change the Avatar's color by using the property
color. If needed you could also change the text's color with the property
You can add a notification label to the avatar, either a reference point or a number with the property
You could also change the badge's color by using the property
badge-color. You are able to use the Main Colors or RGB and HEX colors.
Only RGB and HEX colors are supported.
You can change the main icon of the Avatar with the property
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.
This icon is only displayed when there is no property as
|text||String||If the text is very long, only the first letter is added.|
|text-color||String||Text colores principales, RGB, HEX||Define the color of the Text.||rgb(255, 255, 255)|
|src||String||Url of the image to show in the Avatar.|
|size||String||large, small, Custom measure (70px)||Size of the image to show in the Avatar.||32px|
|color||String||Colores Principales, RGB, HEX||Define the color of the Avatar (does not affect the image).||rgb(195, 195, 195)|
|badge||Boolean, Number||Define if the badge is active and what is its value in number.|
|badge-color||String||Colores Principales, RGB, HEX||Define the color of the Badge.||danger|
|icon||String||Material Icons||Define the icon within the Avatar.||person|
|icon-pack||String||Icon Pack Class Name||Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.||material-icons|