Salad UI

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.
  • :animation - Whether to animate the popover. Defaults to true.
  • :on-open - Handler for popover open event.
  • :on-close - Handler for popover close event.
  • :class - Additional CSS classes.
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the popover
open :boolean

Whether the popover is initially open
false
portal-container :string

The portal container to render the popover in
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>
  <.button variant="outline">
    Open popover
  </.button>
</.popover_trigger>
<.popover_content side="top" align="center" side-offset={8} class="w-80">
  <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 max-h-32 overflow-y-auto">
      <div class="grid grid-cols-3 items-center gap-4">
        <.label for="width">
          Width
        </.label>
        <.input id="width" default-value="100%" class="col-span-2 h-8"></.input>
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <.label for="maxWidth">
          Max. width
        </.label>
        <.input id="maxWidth" default-value="300px" class="col-span-2 h-8"></.input>
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <.label for="height">
          Height
        </.label>
        <.input id="height" default-value="25px" class="col-span-2 h-8"></.input>
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <.label for="maxHeight">
          Max. height
        </.label>
        <.input id="maxHeight" default-value="none" class="col-span-2 h-8"></.input>
      </div>
    </div>
  </div>
</.popover_content>