Item

Uma linha flexível com mídia, conteúdo (título e descrição) e ações. Agrupe várias com ui_item_group.

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

O item item do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/item_component.rb
app/components/ui/item/group_component.rb
app/components/ui/item/media_component.rb
app/components/ui/item/content_component.rb
app/components/ui/item/title_component.rb
app/components/ui/item/description_component.rb
app/components/ui/item/actions_component.rb
app/components/ui/item/header_component.rb
app/components/ui/item/footer_component.rb
app/components/ui/item/separator_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/item_helper.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_item(variant: :outline) do %>
  <%= ui_item_media(variant: :icon) { ui_icon("file-text") } %>
  <%= ui_item_content do %>
    <%= ui_item_title { "Report.pdf" } %>
    <%= ui_item_description { "2.4 MB" } %>
  <% end %>
<% end %>

Exemplos

Padrão

Um item com mídia, conteúdo e ação.

Relatorio.pdf

2,4 MB · atualizado há 2 dias

<%= ui_item_group(class: "w-80") do %>
  <%= ui_item(variant: :outline) do %>
    <%= ui_item_media(variant: :icon) { ui_icon("file-text") } %>
    <%= ui_item_content do %>
      <%= ui_item_title { "Relatorio.pdf" } %>
      <%= ui_item_description { "2,4 MB · atualizado há 2 dias" } %>
    <% end %>
    <%= ui_item_actions do %>

<%= ui_item_group(class: "w-80") do %>
  <%= ui_item(variant: :outline) do %>
    <%= ui_item_media(variant: :icon) { ui_icon("file-text") } %>
    <%= ui_item_content do %>
      <%= ui_item_title { "Relatorio.pdf" } %>
      <%= ui_item_description { "2,4 MB · atualizado há 2 dias" } %>
    <% end %>
    <%= ui_item_actions do %>
      <%= ui_button(variant: :ghost, size: :icon) { ui_icon("ellipsis", label: "Ações") } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Item`	`tag`	`:div`	O elemento renderizado: `:a` com `href:`, ou `:button`, para uma linha clicável.
`Item`	`variant`	`:default`	A superfície da linha. Um de `:default`, `:outline`, `:muted`.
`Item`	`size`	`:default`	O espaçamento interno e o gap. Um de `:default`, `:sm`.
`Item::Media`	`variant`	`:default`	`:icon` desenha um quadrado com borda, `:image` recorta uma miniatura quadrada, `:default` é um espaço sem moldura. Um de `:default`, `:icon`, `:image`.