Aspect Ratio

Mantém o conteúdo em uma proporção fixa usando a propriedade CSS aspect-ratio.

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 aspect-ratio --yes

O item aspect-ratio do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/aspect_ratio_component.rb
app/helpers/ui/aspect_ratio_helper.rb
vendor/shadwire/shadwire.css

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

Uso

<%= ui_aspect_ratio(ratio: "16 / 9") do %>
  <%= image_tag "cover.jpg", class: "h-full w-full object-cover" %>
<% end %>

Exemplos

Padrão

Restringe o conteúdo à proporção 16 / 9.

16 / 9

<%= ui_aspect_ratio(ratio: "16 / 9", class: "w-72 overflow-hidden rounded-md border bg-muted") do %>
  <div class="flex h-full w-full items-center justify-center text-sm font-medium text-muted-foreground">16 / 9</div>
<% end %>