Vuer UIKit | FortyFive Labs

Displays rich content in a portal, triggered by a button.

Props

Prop	Type	Default	Description
...Radix props	`ComponentProps<typeof PopoverPrimitive.Root>`	-	All Radix Popover root props

PopoverContent

Prop	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Content alignment relative to trigger
`sideOffset`	`number`	`4`	Offset in pixels from the trigger
...Radix props	`ComponentProps<typeof PopoverPrimitive.Content>`	-	All Radix content props

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80" align="start" onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <div>
      <div className="space-y-2 mb-2">
        <h4 className="leading-none font-medium">Dimensions</h4>
        <p className="text-muted-foreground text-sm">
          Set the dimensions for the layer.
        </p>
      </div>
      <div className="space-y-2">
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Width</p>
            <InputRoot
              id="width"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Max width</p>
            <InputRoot
              id="maxWidth"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Height</p>
            <InputRoot
              id="height"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Max height</p>
            <InputRoot
              id="maxHeight"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
      </div>
    </div>
  </PopoverContent>
</Popover>

Example

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent align="start" sideOffset={8}>Content</PopoverContent>
</Popover>