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 o seu app 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, então 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 { "Profile details." } %>
<% end %>

Exemplos

Padrão

Um cartão de perfil que aparece ao passar o mouse.

@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 %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`HoverCard`	`open_delay`	`700`	Milissegundos de hover ou foco antes de abrir.
`HoverCard`	`close_delay`	`300`	Milissegundos até fechar depois que o ponteiro ou o foco saem.
`HoverCard::Trigger`	`tag`	`:a`	O elemento renderizado; um link por padrão, então passe `href:`.
`HoverCard::Content`	`side`	`:bottom`	A borda em que abre: `:top`, `:right`, `:bottom` ou `:left`.
`HoverCard::Content`	`align`	`:center`	O alinhamento ao longo dessa borda: `:start`, `:center` ou `:end`.