wowerlay is a Vue 3 component that helps you create animated, customizable popovers on elements.
How to use it:
1. Import and register the wowerlay component.
// stylesheet import 'wowerlay/style.css'; import { createApp } from 'vue'; import { createWowerlay } from 'wowerlay'; import App from './App.vue'; const app = createApp(App); const wowerlay = createWowerlay(); app.use(wowerlay); app.mount('#app');
2. Attach the popover to the target trigger element as follows:
<template> <button ref="targetElement" @click="toggle">Click Me</button> <Wowerlay tag="section" :target="targetElement" v-model:visible="isVisible" > <div>Popover Content</div> </Wowerlay> </template>
import { Wowerlay } from 'wowerlay'; import { ref } from 'vue'; const targetElement = ref<HTMLElement>(); const targetElement = ref(null); const isVisible = ref(false); const toggle = () => (isVisible.value = !isVisible.value);
3. Available component props.
interface WowerlayProps { /** * Primary position for Wowerlay. * @default "bottom" */ position?: | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'; /** * Target element for Wowerlay to follow */ target: HTMLElement; /** * If given, Wowerlay will be able to leave screen. * @default false */ canLeaveViewport?: boolean; /** * If given Wowerlay won't update its position after mounted * @default false */ fixed?: boolean; /** * If given Wowerlay will not flip to stay in view. * @default false */ noFlip?: boolean; /** * Tag name for Wowerlay wrapper element. * @default "div" */ tag?: string; /** * Horizontal gap betweeen Wowerlay and the target * @default 0 */ horizontalGap?: number; /** * Vertical gap between Wowerlay and the target. * @default 0 */ verticalGap?: number; /** * Disables click blocker background when Wowerlay is visible * @default false */ noBackground?: boolean; /** * Disable or set custom transition for Wowerlay * @set false to disable transition * @set string to use your own transition name. */ transition?: string | boolean; /** * If enabled Wowerlay will sync its width same as target's width. * @set true to enable. * @default false */ syncWidth?: boolean; /** * If enabled Wowerlay will sync its width same as target's width. * @set true to enable. * @default false */ syncHeight?: boolean; }
Preview:
Changelog:
0.5.2 (04/13/2022)
- Added syncWidth and syncHeight props.
Download Details:
Author: teamseodo
Live Demo: https://wowerlay.pages.dev/
Download Link: https://github.com/teamseodo/wowerlay/archive/refs/heads/main.zip
Official Website: https://github.com/teamseodo/wowerlay
Install & Download:
# Yarn
$ yarn add wowerlay
# NPM
$ npm i wowerlay