Salad UI
- 1.3.0

Popover

The main popover component that manages state and positioning.

Read more Read less

Options

  • :id - Required unique identifier for the popover.
  • :open - Whether the popover is initially open. Defaults to false.
  • :use-portal - Whether to move content outside its root while open. Defaults to false.
  • :portal-container - CSS selector for portal target. Used only when :use-portal is true.
  • :on-open - Handler for popover open event.
  • :on-close - Handler for popover close event.
  • :class - Additional CSS classes.

Component events

  • :on-open - Fired when the popover opens.
  • :on-close - Fired when the popover closes.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the popover
open :boolean

Whether the popover is initially open
false
use-portal :boolean

Whether to render the popover in a portal
false
portal-container :string

Portal container selector when use-portal is enabled
class :string
on-open :any

Handler for popover open event
on-close :any

Handler for popover close event
rest :global
Required inner_block * :slot 
<.popover_trigger as={&button/1} variant="outline">
  Open popover
</.popover_trigger>
<.popover_content side="top" align="center" side-offset={8} class="w-96 border-0 bg-transparent p-0 shadow-none">
  <.card>
    <.card_header class="p-4 pb-3">
      <.card_title class="text-base">Dimensions</.card_title>
      <.card_description>
        Set the dimensions for the layer.
      </.card_description>
    </.card_header>
    <.card_content class="p-4 pt-0">
    <div class="space-y-3">
      <div class="flex items-center gap-3">
        <.label for="width" class="w-20 shrink-0">
          Width
        </.label>
        <.input id="width" default-value="100%" class="h-8 min-w-0 flex-1"></.input>
      </div>
      <div class="flex items-center gap-3">
        <.label for="maxWidth" class="w-20 shrink-0">
          Max. width
        </.label>
        <.input id="maxWidth" default-value="300px" class="h-8 min-w-0 flex-1"></.input>
      </div>
      <div class="flex items-center gap-3">
        <.label for="height" class="w-20 shrink-0">
          Height
        </.label>
        <.input id="height" default-value="25px" class="h-8 min-w-0 flex-1"></.input>
      </div>
      <div class="flex items-center gap-3">
        <.label for="maxHeight" class="w-20 shrink-0">
          Max. height
        </.label>
        <.input id="maxHeight" default-value="none" class="h-8 min-w-0 flex-1"></.input>
      </div>
    </div>
    </.card_content>
  </.card>
</.popover_content>