Avatar

# Avatar

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Add an avatar easily and with functionality with the component <vs-avatar>

Lily
EY
Code copied

# Color

Change the color of the compound with the color property, the colors allowed are the main colors of vuesax and (HEX, RGB)

P
S
D
Warn
Dark
HEX
RGB
Code copied

# Size

Change the size of the component to the number provided if for example the size value is 60 equivalent to 60px in height and width

Lily
EY
Code copied

# Badge

Add a badge to the component with the badge property or the slot

You can also change the color to represent a user status as disconnected or connected with colors such as success or danger, this you do with the badge-color property

There are times when you need to use the avatar in a chat environment and for this you can add the writing property that adds a writing animation

28
Off
Code copied

# Auto font and split

If the user has a short name, it is added as it is but if it is a very long text or has several spaces, the text to be displayed will be automatically generated so that it can be seen correctly

The maximum length of characters is 5. When that limit is exceeded, changes are made in the text

L
Joel
Fanny
SW
DRB
GREH
Code copied

# Circle New

Change the border-radius of the entire component to 50% with the circle property making it fully circular

Joel
Fanny
Code copied

# Square New

Change the border-radius of the entire component to 0% with the square property making it completely square

Joel
Fanny
Code copied

# History New

It generates a border around the avatar, this is usually used to represent that the user is doing an action or in many cases has a History

You can make the border a gradient like instagram with the property history-gradient

Code copied

# Icon

You can put an icon inside an avatar when for example an image is not yet added or is a new user, for this you can simply use the default slot

Code copied

# Loading New

Add a loading animation to the component, this property is a boolean so you can add it without any value

28
Code copied

# Icons New

Add a space next to the avatar with the slot icons where you can put icons for some dynamic action of that user in specific

Code copied

# Group New

You can group several avatar with the parent component vs-avatar-group, this component has two interesting properties:

  • max: determine the maximum number of avatars to show and the rest hides it generating the number in the last avatar shown

  • float: causes the avatar components to be placed on each other and the grouping of one on top of the other is eliminated

Code copied

# API

props

Property Type Values Description default Example More
color String Vuesax Colors RGB HEX Change the color of the component. gray-2 Usage Open Close 
<vs-avatar color="#7d33ff">
  <template #text>
    HEX
  </template>
</vs-avatar> <vs-avatar color="rgb(59,222,200)">
  <template #text>
    RGB
  </template>
</vs-avatar>
size Number Number Change the size of the avatar component. 44 Usage Open Close 
<template>
  <div class="center con-avatars">
    <vs-avatar size="30">
      <template #text>
        Lily
      </template>
    </vs-avatar>
    <vs-avatar size="40">
      <template #text>
        Evan You
      </template>
    </vs-avatar>
    <vs-avatar>
        <i class='bx bx-user'></i>
    </vs-avatar>
    <vs-avatar size="60" primary badge badge-color="danger">
        <i class='bx bxs-hot' ></i>
    </vs-avatar>
    <vs-avatar size="70" badge badge-color="success">
      <img src="/avatars/avatar-4.png" alt="">
    </vs-avatar>
  </div>
</template>
badge Boolean true false Determine if the badge is active. false Usage Open Close 
<template>
  <div class="center con-avatars">
    <vs-avatar badge>
      <img src="/avatars/avatar-5.png" alt="">
    </vs-avatar>
    <vs-avatar badge badge-color="danger">
      <img src="/avatars/avatar-6.png" alt="">
    </vs-avatar>
    <vs-avatar badge badge-color="success">
      <img src="/avatars/avatar-2.png" alt="">
      <template #badge>
        28
      </template>
    </vs-avatar>
    <vs-avatar badge badge-color="warn">
      <img src="/avatars/avatar-8.png" alt="">
      <template #badge>
        <i class='bx bxs-bell-off' ></i>
      </template>
    </vs-avatar>
    <vs-avatar writing badge badge-color="primary">
      <img src="/avatars/avatar-3.png" alt="">
    </vs-avatar>
    <vs-avatar badge-position="top-right" badge badge-color="#7d33ff">
      <img src="/avatars/avatar-1.png" alt="">
    </vs-avatar>
  </div>
</template>
badge-color String Vuesax colorsRGBHEX Change the color of the badge inside the avatar. primary Usage Open Close 
<vs-avatar badge badge-color="danger">
  <img src="/avatars/avatar-6.png" alt="">
</vs-avatar>
circle Boolean true false Change the style of the avatar by circulating it. false Usage Open Close 
<vs-avatar circle>
  <template #text>
    Joel
  </template>
</vs-avatar>
square Boolean true false Change the style of the avatar by making it square. false Usage Open Close 
<vs-avatar square>
  <template #text>
    Joel
  </template>
</vs-avatar>
writing Boolean truefalse Add an animation to the writing badge. false Usage Open Close 
<vs-avatar writing badge badge-color="primary">
  <img src="/avatars/avatar-3.png" alt="">
</vs-avatar>
history Boolean truefalse Add a border to the avatar. gray-2 Usage Open Close 
<vs-avatar history history-gradient>
  <img src="/avatars/avatar-5.png" alt="">
</vs-avatar>
history-gradient Boolean truefalse Change the color of the border to a gradient. false Usage Open Close 
<vs-avatar history history-gradient>
  <img src="/avatars/avatar-5.png" alt="">
</vs-avatar>
loading Boolean truefalse Add a loading animation to the avatar. false Usage Open Close 
<vs-avatar loading badge>
  <img src="/avatars/avatar-5.png" alt="">
</vs-avatar>
max number number (vs-avatar-group) determine how many avatars are visible. Usage Open Close 
<vs-avatar-group max="7">
  <vs-avatar>
    <img src="/avatars/avatar-1.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-6.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-2.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-7.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-3.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-8.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-4.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-9.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-5.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-10.png" alt="">
  </vs-avatar>
</vs-avatar-group>
float Boolean truefalse (vs-avatar-group) change the way the avatar is composed by placing one next to the other. false Usage Open Close 
<vs-avatar-group float max="8">
  <vs-avatar>
    <img src="/avatars/avatar-1.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-6.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-2.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-7.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-3.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-8.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-4.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-9.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-5.png" alt="">
  </vs-avatar>
  <vs-avatar>
    <img src="/avatars/avatar-10.png" alt="">
  </vs-avatar>
  </vs-avatar-group>
pointer Boolean truefalse Determine if the avatar has a pointer cursor. false Open Close 
<vs-avatar pointer >
  <img src="/avatars/avatar-10.png" alt="">
</vs-avatar>

slots

Property Type Values Description default Example More
text slot Add text within the avatar component. Usage Open Close 
<vs-avatar>
  <template #text>
    Lily
  </template>
</vs-avatar>
badge slot Add to the badge everything that is inside the slot, commonly used for numbers and an icon. Usage Open Close 
<vs-avatar badge badge-color="success">
  <img src="/avatars/avatar-2.png" alt="">
  <template #badge>
    28
  </template>
</vs-avatar>
icons slot Add a space to put icons next to the avatar. Usage Open Close 
<vs-avatar>
  <img src="/avatars/avatar-1.png" alt="">
  <template #icons>
    <i class='bx bxl-facebook-square' ></i>
    <i class='bx bxl-github' ></i>
    <i class='bx bxl-twitter' ></i>
  </template>
</vs-avatar>
Last Updated: 2/10/2020, 2:21:50 AM

Notification