Avatar

Uma imagem circular de usuário, com um texto alternativo quando não há foto.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add avatar --yes

O item avatar do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/avatar_component.rb
app/helpers/ui/avatar_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_avatar(src: "/avatar.png", alt: "Eduardo Moraes", fallback: "EM") %>

Ou renderize Ui::AvatarComponent diretamente:

<%= render Ui::AvatarComponent.new(fallback: "EM", aria: { label: "Eduardo Moraes" }) %>

Exemplos

Imagem, fallback e rótulo

Uma imagem com texto alternativo, ou só o texto para usuários sem foto.

EM ?

<div class="flex items-center gap-4">
  <%= ui_avatar(
        src: "https://i.pravatar.cc/96?img=12",
        alt: "Eduardo Moraes",
        fallback: "EM"
      ) %>
  <%= ui_avatar(fallback: "EM", aria: { label: "Eduardo Moraes" }) %>
  <%= ui_avatar(fallback: "?", aria: { label: "Anonymous user" }) %>

<div class="flex items-center gap-4">
  <%= ui_avatar(
        src: "https://i.pravatar.cc/96?img=12",
        alt: "Eduardo Moraes",
        fallback: "EM"
      ) %>
  <%= ui_avatar(fallback: "EM", aria: { label: "Eduardo Moraes" }) %>
  <%= ui_avatar(fallback: "?", aria: { label: "Anonymous user" }) %>
</div>

Referência da API

ui_avatar(**options, &block) encapsula Ui::AvatarComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`src`	String	`nil`	URL da imagem.
`alt`	String	`""`	Texto alternativo da imagem.
`fallback`	String	`nil`	Iniciais ou símbolo exibido quando não há imagem.
`**attrs`	Hash	`{}`	Atributos HTML livres no wrapper.