co-avatar
Ver código
<co-avatar type="text" text="JD" size="sm"></co-avatar>
<co-avatar type="text" text="AB" size="md"></co-avatar>
<co-avatar type="text" text="PR" size="lg"></co-avatar>Props
| Prop | Atributo | Tipo | Default | Descripción |
|---|---|---|---|---|
color | color | string | undefined | — | Custom background color (hex or CSS value) |
icon | icon | string | 'user' | Phosphor icon name (type="icon"), defaults to "user" |
iconWeight | icon-weight | "bold" | "duotone" | "fill" | "light" | "regular" | "thin" | 'regular' | Icon weight |
shape | shape | "circle" | "square" | 'circle' | Shape of the avatar |
size | size | "lg" | "md" | "sm" | "xl" | "xs" | "xxs" | 'md' | Size of the avatar |
text | text | string | undefined | — | Initials or short text (type="text") |
type | type | "icon" | "text" | 'text' | Display type: text shows initials, icon shows a Phosphor icon |
Eventos
Este componente no emite eventos personalizados.
Slots
Este componente no expone slots.
CSS Parts
| Part | Descripción |
|---|---|
::part(avatar) |
CSS Custom Properties
Este componente no expone CSS custom properties.