gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/popover.md

• Home
• Components
• Popover

Popover

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

Props

Popover

Prop Type Default Description ...Radix props ComponentProps - 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 - 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>