9.7k

Popover

PreviousNext

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

Docs API Reference 
<!-- AUTO-GENERATED BY scripts/generate-custom-demos.ts. DO NOT EDIT DIRECTLY. -->
<script setup lang="ts">
import VButton from '@ui-kit/src/components/Base/VButton/VButton.vue'
import {
  VPopover,
  VPopoverContent,
  VPopoverTrigger,
} from '@ui-kit/src/components/Base/VPopover'
</script>

<template>
  <VPopover>
    <VPopoverTrigger as-child>
      <VButton variant="outlined">
      Open popover
    </VButton>
    </VPopoverTrigger>
    <VPopoverContent align="start" :side-offset="10" class="w-[22rem]">
      <div class="grid gap-3">
        <div>
          <p>Quick settings</p>
          <p>Adjust a few values directly in the popover.</p>
        </div>
        <label class="grid gap-1">
          <span>Width</span>
          <input value="100%">
        </label>
        <label class="grid gap-1">
          <span>Offset</span>
          <input value="12px">
        </label>
      </div>
    </VPopoverContent>
  </VPopover>
</template>

Installation

pnpm dlx shadcn-vue@latest add popover

Usage

<script setup lang="ts">
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
</script>

<template>
  <Popover>
    <PopoverTrigger>Open</PopoverTrigger>
    <PopoverContent>Place content for the popover here.</PopoverContent>
  </Popover>
</template>
Pin InputProgress