Tile UI Vue
Source code

Components

Popover

Popover overlay.

Use Popover to show richer content anchored to a trigger.

import { Popover, PopoverTrigger, PopoverContent } from '@tile-ui/vue';
 
export default function PopoverDemo() {
	return (
		<Popover>
			<PopoverTrigger class="component-preview__action">Open popover</PopoverTrigger>

Registry install

pnpm dlx shadcn@latest add @tile-ui/popover

Package usage

import { Popover, PopoverTrigger, PopoverContent } from '@tile-ui/vue';
 
<Popover>
	<PopoverTrigger>Open</PopoverTrigger>
	<PopoverContent>Rich content here.</PopoverContent>
</Popover>

Highlights

  • Trigger and content
  • Side, align, and offset
  • Controlled and uncontrolled

Registry dependencies

Item Purpose
popover Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Popover

Prop Type Default
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —

PopoverTrigger

Prop Type Default
asChild boolean —

PopoverContent

Prop Type Default
side 'top' | 'right' | 'bottom' | 'left' —
align 'start' | 'center' | 'end' —
sideOffset number —
PreviousPaginationNextProgress