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 a sua aplicação 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 { "Sem mensagens" } %>
    <%= ui_empty_description { "Elas aparecem aqui." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(size: :sm) { "Atualizar" } %>

<%= ui_empty do %>
  <%= ui_empty_header do %>
    <%= ui_empty_media(variant: :icon) { ui_icon("inbox") } %>
    <%= ui_empty_title { "Sem mensagens" } %>
    <%= ui_empty_description { "Elas aparecem aqui." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(size: :sm) { "Atualizar" } %>
  <% end %>
<% end %>

Exemplos

Padrão

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

Sem mensagens

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 { "Sem mensagens" } %>
    <%= 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 { "Sem mensagens" } %>
    <%= ui_empty_description { "Quando você receber mensagens, elas aparecem aqui." } %>
  <% end %>
  <%= ui_empty_content do %>
    <%= ui_button(variant: :outline, size: :sm) { "Atualizar" } %>
  <% end %>
<% end %>