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

Agrega un avatar fácilmente y con funcionalidad con el componente <vs-avatar>

Lily
EY
Code copied

# Color

Cambia el color de el componete con la propiedad color, los colores permitidos son los colores principales de vuesax y (HEX, RGB)

P
S
D
Warn
Dark
HEX
RGB
Code copied

# Size

Cambia el tamaño de el componente al numero proporcionado si por ejemplo el valor de size es 60 equivale a 60px de altura y de ancho

Lily
EY
Code copied

# Badge

Agrega un badge al componente con la propiedad badge o el slot

también puedes cambiar el color para representar un estado de el usuario como desconectado o conectado con colores como success o danger, esto lo haces con la propiedad badge-color

hay ocasiones en que necesitas usar el avatar en un entorno de chat y para ello puedes agregarle la propiedad writing que agrega una animación de escritura

28
Off
Code copied

# Auto font and split

Si el usuario tiene un nombre corto se agrega tal cual es pero si es un texto muy largo o tiene varios espacios se va a generar automáticamente el texto a mostrar para que pueda verse correctamente

La longitud máxima de caracteres es 5. Cuando se supera ese límite, se realizan cambios en el texto

L
Joel
Fanny
SW
DRB
GREH
Code copied

# Circle New

Cambia el border-radius de todo el componente a 50% con la propiedad circle haciéndolo totalmente circular

Joel
Fanny
Code copied

# Square New

Cambia el border-radius de todo el componente a 0% con la propiedad square haciéndolo totalmente cuadrado

Joel
Fanny
Code copied

# History New

Genera un borde al rededor de el avatar, esto usualmente se usa para representar que el usuario esta haciendo una acción o en muchos casos tiene una historia

Puede hacer que el borde sea un gradiente como el de instagram con la propiedad history-gradient

Code copied

# Icon

Puedes poner dentro de un avatar un icono cuando por ejemplo una imagen todavía no esta agregada o es un usuario nuevo, para ello simplemente puedes usar el slot por defecto

Code copied

# Loading New

Agrega una animación de cargando al componente, esta propiedad es un boolean por lo que puedes agregarla sin ningún valor

28
Code copied

# Icons New

Agrega un espacio al lado de el avatar con el slot icons donde puedes poner iconos para alguna acción dinámica de ese usuario en especifico

Code copied

# Group New

Puedes agrupar varios avatar con el componente padre vs-avatar-group, este componente tiene dos propiedades interesantes:

  • max: determina el máximo de avatars a mostrar y el resto lo esconde generando el numero en el ultimo avatar mostrado

  • float: hace que los componentes avatar se pongan uno al del otro y se elimina la agrupación de uno encima de otro

Code copied

# API

props

Property Type Values Description default Example More
color String Vuesax Colors RGB HEX Cambia el color de el componente. 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 Cambia el tamaño de el componente avatar. 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 Determina si el badge esta activo. 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 Cambia el color de el badge dentro de el avatar. primary Usage Open Close 
<vs-avatar badge badge-color="danger">
  <img src="/avatars/avatar-6.png" alt="">
</vs-avatar>
circle Boolean true false Cambia el estilo de el avatar haciendolo circular. false Usage Open Close 
<vs-avatar circle>
  <template #text>
    Joel
  </template>
</vs-avatar>
square Boolean true false Cambia el estilo de el avatar haciéndolo cuadrado. false Usage Open Close 
<vs-avatar square>
  <template #text>
    Joel
  </template>
</vs-avatar>
writing Boolean truefalse agrega una animación al badge de escritura. false Usage Open Close 
<vs-avatar writing badge badge-color="primary">
  <img src="/avatars/avatar-3.png" alt="">
</vs-avatar>
history Boolean truefalse Agrega un borde al avatar. gray-2 Usage Open Close 
<vs-avatar history history-gradient>
  <img src="/avatars/avatar-5.png" alt="">
</vs-avatar>
history-gradient Boolean truefalse Cambia el color de el borde a un gradient. false Usage Open Close 
<vs-avatar history history-gradient>
  <img src="/avatars/avatar-5.png" alt="">
</vs-avatar>
loading Boolean truefalse Agrega un animación de cargando al avatar. false Usage Open Close 
<vs-avatar loading badge>
  <img src="/avatars/avatar-5.png" alt="">
</vs-avatar>
max number number (vs-avatar-group) determina cuantos avatars se encuentran visibles. 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) cambia la forma en que se componen los avatar poniendo uno al lado de el otro. 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 Determina si el avatar tiene un cursor pointer. 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 Agrega un texto dentro de el componente avatar. Usage Open Close 
<vs-avatar>
  <template #text>
    Lily
  </template>
</vs-avatar>
badge slot Agrega al badge todo lo que este dentro de el slot, comúnmente se usa para números y un icono. Usage Open Close 
<vs-avatar badge badge-color="success">
  <img src="/avatars/avatar-2.png" alt="">
  <template #badge>
    28
  </template>
</vs-avatar>
icons slot Agrega un espacio para poner iconos al lado de el 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: 10/2/2020 2:21:50

Notification