Avatar
<gstock-avatar>
|
GstockAvatar
Ejemplos
Color
Utilice el atributo color para cambiar el color del avatar.
<gstock-avatar color="neutral"></gstock-avatar>
<gstock-avatar color="brand"></gstock-avatar>
<gstock-avatar color="mint"></gstock-avatar>Iniciales
Utilice el atributo initials para mostrar algo más personalizado que un ícono, útil cuando no tiene una imagen para usar.
<gstock-avatar initials="S" label="Avatar with initials"></gstock-avatar>
<gstock-avatar initials="GS" label="Avatar with initials"></gstock-avatar>Icono
Utilice el slot icon para personalizar el icono.
<gstock-avatar label="Avatar with icon">
<gstock-icon slot="icon" name="image"></gstock-icon>
</gstock-avatar>
<gstock-avatar label="Avatar with icon">
<gstock-icon slot="icon" name="archive"></gstock-icon>
</gstock-avatar>
<gstock-avatar label="Avatar with icon">
<gstock-icon slot="icon" name="briefcase"></gstock-icon>
</gstock-avatar>Tamaño
Utilice el atributo size para cambiar el tamaño del avatar.
<gstock-avatar label="Extra small" size="xsmall"></gstock-avatar>
<gstock-avatar label="Small" size="small"></gstock-avatar>
<gstock-avatar label="Medium" size="medium"></gstock-avatar>
<gstock-avatar label="Large" size="large"></gstock-avatar>
<gstock-avatar label="Extra large" size="xlarge"></gstock-avatar>
<br>
<gstock-avatar initials="A" label="Avatar with initials" size="xsmall"></gstock-avatar>
<gstock-avatar initials="E" label="Avatar with initials" size="small"></gstock-avatar>
<gstock-avatar initials="L" label="Avatar with initials" size="medium"></gstock-avatar>
<gstock-avatar initials="S" label="Avatar with initials" size="large"></gstock-avatar>
<gstock-avatar initials="V" label="Avatar with initials" size="xlarge"></gstock-avatar>Imagen
Utilice los atributos image y label para usar una imagen para el avatar. Usa el atributo loading="lazy" para cargar la imagen de forma diferida.
<gstock-avatar image="https://i.pravatar.cc/64?img=8" label="Avatar with image"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/64?img=12" label="Avatar with image" loading="lazy"></gstock-avatar>
<gstock-avatar image="https://i.pravatar.cc/64?img=38" label="Avatar with image" loading="lazy"></gstock-avatar>Redondeado
Utilice el atributo rounded para cambiar la forma del avatar a un aspecto redondeado.
<gstock-avatar rounded label="Rounded"></gstock-avatar>