https://github.com/floating-ui/svelte-popper

🍿🔗Official Svelte wrapper for Popper - the positioning library
https://github.com/floating-ui/svelte-popper

dropdowns popovers popperjs positioning svelte svelte-component tooltips

Last synced: 2 months ago
JSON representation

🍿🔗Official Svelte wrapper for Popper - the positioning library

• Host: GitHub
• URL: https://github.com/floating-ui/svelte-popper
• Owner: floating-ui
• Created: 2020-04-19T14:22:41.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-07-11T13:54:00.000Z (over 1 year ago)
• Last Synced: 2024-05-01T11:39:14.597Z (9 months ago)
• Topics: dropdowns, popovers, popperjs, positioning, svelte, svelte-component, tooltips
• Language: HTML
• Homepage:
• Size: 149 KB
• Stars: 31
• Watchers: 4
• Forks: 4
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @popperjs/svelte

Use Popper in your Svelte projects.

### Installation

```

yarn add @popperjs/svelte

# or

npm i @popperjs/svelte

```

### Usage

```svelte

  import Popper from "@popperjs/svelte";

  // super-simple CSS Object to string serializer

  const css = obj =>

    Object.entries(obj || {})

      .map(x => x.join(":"))

      .join(";");

  // DOM references to the interested elements

  let referenceElement;

  let popperElement;

  let arrowElement;

  // Popper options, reactive to update when arrowElement is set

  $: popperOptions = {

    modifiers: [

      { name: "offset", options: { offset: [0, 5] } },

      { name: "arrow", options: { element: arrowElement } }

    ]

  };

  // bound variables where Popper will store styles and attributes

  let styles = {};

  let attributes = {};

  console.log(styles);

  /* for some example styles, see `dev/App.svelte` */

  Reference Element

  


    Popper Element

    


  


```