Popover Edit
Displays rich content in a portal, triggered by a button.
Examples
Heading
Popovers stay open until you click the button or anywhere else on the document.
<%= render_popover do %>
<%= popover_trigger do %>
<%= render_button "Open Popover", variant: :outline %>
<% end %>
<%= popover_content do %>
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="font-medium leading-none">Heading</h4>
<p class="text-sm text-muted-foreground">Popovers stay open until you click the button or anywhere else on the document. </p>
</div>
</div>
<% end %>
<% end %>
Installation
rails generate shadcn-ui popover
Usage
<%= render_popover do %>
<%= popover_trigger do %>
<% end %>
<%= popover_content do %>
<% end %>
<% end %>
The Popover component introduces:
app/helpers/components/popover_helper.rbapp/views/components/ui/_popover.html.erbapp/javascript/controllers/ui/popover_controller.js
render_popover accepts a block where you call popover_trigger, whose block will be the element that triggers the popover and
popover_content whose block will be the content of the popover.
Dimensions
Set the dimensions for the layer.
<%= render_popover do %>
<%= popover_trigger do %>
<%= render_button "Open Popover", variant: :outline %>
<% end %>
<%= popover_content do %>
<div class="grid gap-4">
<div class="space-y-2">
<h4 class="font-medium leading-none">Dimensions</h4>
<p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
</div>
<div class="grid gap-2">
<div class="grid grid-cols-3 items-center gap-4">
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="width">Width</label><input
class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-2 h-8"
id="width"
value="100%">
</div>
</div>
</div>
<% end %>
<% end %>