Popover ​

Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.

Usage ​

Basic Usage ​

Popovers are built using the VPopover, VPopoverButton, and VPopoverPanel components.

Clicking the VPopoverButton will automatically open/close the VPopoverPanel. When the panel is open, clicking anywhere outside of its contents, pressing the Escape key, or tabbing away from it will close the Popover.

Placement ​

You can change the panel placement via placement prop.

Here are list of the valid placements:

export const popoverPlacements = [
  "top",
  "right",
  "bottom",
  "left",
  "bottom-start",
  "bottom-end",
  "top-start",
  "top-end",
  "left-start",
  "left-end",
  "right-start",
  "right-end",
] as const;

export type VPopoverPlacement = typeof popoverPlacements[number];

export const popoverPlacements = [
  "top",
  "right",
  "bottom",
  "left",
  "bottom-start",
  "bottom-end",
  "top-start",
  "top-end",
  "left-start",
  "left-end",
  "right-start",
  "right-end",
] as const;

export type VPopoverPlacement = typeof popoverPlacements[number];

Overlay ​

If you'd like to style a backdrop over your application UI whenever you open a VPopover, use the VPopoverOverlay component:

Group ​

When rendering several related Popovers, for example in a site's header navigation, use the VPopoverGroup component. This ensures panels stay open while users are tabbing between Popovers within a group, but closes any open panel once the user tabs outside of the group:

List ​

Here's an example of using VList with VPopover:

Props ​

Events ​

None

Slots ​

CSS Variables ​

:root {
  --v-popover-margin: var(--size-spacing-2);
  --v-popover-bg-color: white;
  --v-popover-border-color: var(--color-gray-300);
}

:root {
  --v-popover-margin: var(--size-spacing-2);
  --v-popover-bg-color: white;
  --v-popover-border-color: var(--color-gray-300);
}

Standalone Installation ​

You can also install the VPopover component individually via @morpheme/popover package:

npm i @morpheme/popover

npm i @morpheme/popover

<script setup lang="ts">
import VPopover from "@morpheme/popover";
</script>

<template>
  <VPopover />
</template>

<script setup lang="ts">
import VPopover from "@morpheme/popover";
</script>

<template>
  <VPopover />
</template>

Storybook ​

View Storybook documentation here.