Empty

Um estado vazio: mídia, título, descrição e ações centralizados.

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 empty --yes

O item empty do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/empty_component.rb
app/components/ui/empty/header_component.rb
app/components/ui/empty/media_component.rb
app/components/ui/empty/title_component.rb
app/components/ui/empty/description_component.rb
app/components/ui/empty/content_component.rb
app/helpers/ui/empty_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_empty do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "No messages" } %>
    <%= ui_empty_description { "New messages show up here." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(size: :sm) { "Refresh" } %>

<%= ui_empty do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "No messages" } %>
    <%= ui_empty_description { "New messages show up here." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(size: :sm) { "Refresh" } %>
  <% end %>
<% end %>

Exemplos

Padrão

Estado vazio com ícone, textos e uma ação.

Nenhuma mensagem

Quando você receber mensagens, elas aparecem aqui.

<%= ui_empty(class: "w-80 rounded-lg border") do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "Nenhuma mensagem" } %>
    <%= ui_empty_description { "Quando você receber mensagens, elas aparecem aqui." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(variant: :outline, size: :sm) { "Atualizar" } %>

<%= ui_empty(class: "w-80 rounded-lg border") do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "Nenhuma mensagem" } %>
    <%= ui_empty_description { "Quando você receber mensagens, elas aparecem aqui." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(variant: :outline, size: :sm) { "Atualizar" } %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Empty::Media`	`variant`	`:default`	`:icon` desenha um quadrado neutro em volta de um ícone; `:default` é um espaço sem moldura. Um de `:default`, `:icon`.