Hover Card

Conteúdo rico que abre ao passar o mouse ou focar o gatilho, com atrasos configuráveis.

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

O item hover-card do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/hover_card_component.rb
app/components/ui/hover_card/trigger_component.rb
app/components/ui/hover_card/content_component.rb
app/helpers/ui/hover_card_helper.rb
app/javascript/controllers/ui_hover_card_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus: a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

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

Uso

<%= ui_hover_card do %>
  <%= ui_hover_card_trigger(href: "#") { "@shadwire" } %>
  <%= ui_hover_card_content { "Detalhes do perfil." } %>
<% end %>

Exemplos

Padrão

Cartão de perfil exibido no hover.

@shadwire

<%= ui_hover_card do %>
  <%= ui_hover_card_trigger(href: "#", class: "font-medium underline underline-offset-4") { "@shadwire" } %>
  <%= ui_hover_card_content do %>
    <div class="flex flex-col gap-1">
      <span class="text-sm font-semibold">Shadwire</span>
      <span class="text-sm text-muted-foreground">Componentes Rails que você instala e passa a possuir.</span>
    </div>
  <% end %>

<%= ui_hover_card do %>
  <%= ui_hover_card_trigger(href: "#", class: "font-medium underline underline-offset-4") { "@shadwire" } %>
  <%= ui_hover_card_content do %>
    <div class="flex flex-col gap-1">
      <span class="text-sm font-semibold">Shadwire</span>
      <span class="text-sm text-muted-foreground">Componentes Rails que você instala e passa a possuir.</span>
    </div>
  <% end %>
<% end %>