Avatar

Ejemplos de avatar con imagen y reemplazo de texto.

Paquete: @solidiom/avatar
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

import * as Avatar from "@solidiom/avatar"

;<Avatar.Root>
  <Avatar.Image src="/avatars/ana-garcia.jpg" alt="Foto de Ana García" />
  <Avatar.Fallback>AG</Avatar.Fallback>
</Avatar.Root>

Con reemplazo de nombre completo

Usa el nombre del usuario como contenido de reemplazo para una mejor identificación cuando la imagen no está disponible.

;<Avatar.Root>
  <Avatar.Image src="/avatars/ana-garcia.jpg" alt="Foto de Ana García" />
  <Avatar.Fallback>Ana García</Avatar.Fallback>
</Avatar.Root>

Avatares apilados

Combina múltiples avatares en un grupo para mostrar equipos o hilos de comentarios.

;<div style={{ display: "flex", gap: "8px" }}>
  <Avatar.Root>
    <Avatar.Image src="/users/1.jpg" alt="Usuario 1" />
    <Avatar.Fallback>A</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/users/2.jpg" alt="Usuario 2" />
    <Avatar.Fallback>B</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="/users/3.jpg" alt="Usuario 3" />
    <Avatar.Fallback>C</Avatar.Fallback>
  </Avatar.Root>
</div>

JDASBK

Ver código fuente

        export function Root(props: AvatarRootProps) {
  const [imageStatus, setImageStatus] = createSignal<ImageStatus>("loading")

  return (
    <AvatarContext value={{ imageStatus, setImageStatus }}>
      <span class={props.class} {...applySemanticAttrs({ scope: "avatar", part: "root" })}>
        {props.children}
      </span>
    </AvatarContext>
  )
}