Popover - Pharen

Use Popover to show contextual interactive content. This page covers every Vue component exported by the public module.

View code

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

<template>
  <Popover>
    <PopoverTrigger as-child><Button variant="outline">Open</Button></PopoverTrigger>
    <PopoverContent>Choose a workspace action.</PopoverContent>
  </Popover>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@pharen/ui';

Exports

Export	Purpose
`Popover`	Exported Vue component from this module.
`PopoverAnchor`	Exported Vue component from this module.
`PopoverContent`	Contains the visible content.
`PopoverDescription`	Renders supporting description.
`PopoverHeader`	Structures the header region.
`PopoverTitle`	Renders the accessible title.
`PopoverTrigger`	Opens or activates the component.

Source

Open the source on GitHub