Card

Uma superfície com borda para agrupar conteúdo relacionado.

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

O item card do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/card_component.rb
app/components/ui/card/header_component.rb
app/components/ui/card/title_component.rb
app/components/ui/card/description_component.rb
app/components/ui/card/content_component.rb
app/components/ui/card/footer_component.rb
app/helpers/ui/card_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_card do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Create project" } %>
    <%= ui_card_description { "Deploy your new project in one click." } %>
  <% end %>
  <%= ui_card_content { "Card content." } %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::CardComponent.new do %>
  <%= render Ui::Card::HeaderComponent.new do %>
    <%= render Ui::Card::TitleComponent.new do %>
      Create project
    <% end %>
  <% end %>
<% end %>

Composição

Card
|-- Card::Header
|   |-- Card::Title
|   `-- Card::Description
|-- Card::Content
`-- Card::Footer

Exemplos

Padrão

Monte o card com header, title, description, content e footer.

Criar projeto

Defina o nome, a visibilidade e quem entra desde o início.

Use cards para agrupar conteúdo e ações relacionados.

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Criar projeto" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Defina o nome, a visibilidade e quem entra desde o início.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>

<%= ui_card(class: "max-w-sm", data: { slot: "card" }) do %>
  <%= ui_card_header(data: { slot: "card-header" }) do %>
    <%= ui_card_title(data: { slot: "card-title" }) { "Criar projeto" } %>
    <%= ui_card_description(data: { slot: "card-description" }) do %>
      Defina o nome, a visibilidade e quem entra desde o início.
    <% end %>
  <% end %>
  <%= ui_card_content(data: { slot: "card-content" }) do %>
    <p class="text-sm text-muted-foreground">Use cards para agrupar conteúdo e ações relacionados.</p>
  <% end %>
  <%= ui_card_footer(class: "justify-end gap-2", data: { slot: "card-footer" }) do %>
    <%= ui_button(variant: :outline, size: :sm) { "Cancelar" } %>
    <%= ui_button(size: :sm) { "Criar" } %>
  <% end %>
<% end %>

Referência da API

Helpers disponíveis: ui_card, ui_card_header, ui_card_title, ui_card_description, ui_card_content e ui_card_footer.

API	Elemento	Descrição
`ui_card`	`div`	Container com borda, superfície card e sombra.
`ui_card_header`	`div`	Área superior com espaçamento vertical.
`ui_card_title`	`h3`	Título; `tag:` escolhe o nível do título (`tag_name:`, o nome antigo, ainda funciona).
`ui_card_description`	`p`	Texto auxiliar em muted foreground.
`ui_card_content`	`div`	Conteúdo principal.
`ui_card_footer`	`div`	Ações ou metadados inferiores.