Ultra minimal popover/dropdown component
Generate a popover/dropdown in the body element so it's above all other elements, but positioned next to another element (like the element where it was triggered), powered by svelte-portal
, inspired by ember-basic-dropdown
.
This purely does the positioning logic, no styling, no opening/closing logic, see example below on how to do that.
Demo: https://jakeii.github.io/svelte-popdown/
Popover options:
position
string Where to position the popdown relative to the trigger e.g. (inner|outer)-(top|left|right|bottom) or center (horizontal)/middle (vertical) default is "inner-left outer-bottom"contentClass
string class for the content elementtarget
optional target element if you want the popover in a specific parent element, default is document.scrollingElement
showContent
show the content slot, default is false
calcX
optional - provide your own logic to calculate the X translationcalcY
optional - provide your own logic to calculate the Y translationzIndex
optional - z-index for the content element, default is empty<script>
import Popdown, { onClickOutside } from 'svelte-popdown';
let clickContentVisible = false;
</script>
<Popdown position="below middle" showContent="{clickContentVisible}">
<button slot="trigger" on:click="{()" ="">
(clickContentVisible = !clickContentVisible)} use:onClickOutside={() => (clickContentVisible = false)} > click me
</button>
<div class="content" slot="content" transition:fade>content</div>
</Popdown>
<script>
import Popdown from 'svelte-popdown';
let hoverContentVisible = false;
</script>
<Popdown position="outer-right middle" showContent="{hoverContentVisible}">
<button on:mouseover="{()" ="">
(hoverContentVisible = true)} on:focus={() => (hoverContentVisible = true)} on:mouseout={() => (hoverContentVisible
= false)} on:blur={() => (hoverContentVisible = false)} slot="trigger" > hover me
</button>
<div class="content" slot="content" transition:fade>content</div>
</Popdown>
Once you've created a project and installed dependencies with yarn
, start a development server:
pnpm run dev
# or start the server and open the app in a new browser tab
pnpm run dev -- --open
pnpm run package