RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/jambonn/vue-popper-lite below:

jambonn/vue-popper-lite: A popover component based on popper.js tree shaking for Vue 3 written by TypeScript

A popover component based on popper-lite for Vue 3 support typescript

Using Vue Popper Lite from Vue SFC

Vue SFC Playground

Using Vue Popper Lite from CDN

Vue from CDN

npm install vue-popper-lite

Recommended: https://unpkg.com/vue-popper-lite, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-popper-lite/

<!-- If your content is only a simple string, you can use the content prop -->
<template>
  <v-popper content="This is the Popper content">
    <button slot="reference">
      Reference Element
    </button>
  </v-popper>
</template>

<!-- If your content is more complex, you can use the content slot -->
<template>
  <v-popper>
    <div>This is the Popper content</div>
    <template #reference>
        <button>Trigger element</button>
    </template>
  </v-popper>
</template>

<script>
  import { defineComponent } from "vue";
  import { Popper } from "vue-popper-lite";
  import "vue-popper-lite/style.css";

  export default defineComponent({
    components: {
      'VPopper': Popper,
    },
  });
</script>

Name Type Default Description trigger String hover Optional value:

hover - hover to open popper content
clickToOpen - every click on the popper triggers open, only clicking outside of the popper closes it
clickToToggle - click on the popper toggles it's visibility

placement String bottom Preferred placement of the Popper delay-on-mouse-over Number 10 Delay in ms before showing popper during a mouse over delay-on-mouse-out Number 10 Delay in ms before hiding popper during a mouse out disabled Boolean false Disables the Popper. If it was already open, it will be closed. content String null If your content is just a simple string, you can pass it as a prop transition String empty Custom transition class enter-active-class String null Custom transition class enter leave-active-class String null Custom transition class leave force-show Boolean false Force show popper append-to-body Boolean false Append content to body visible-arrow Boolean true Visible an arrow on the Popper arrow-padding Number 0 Stop arrow from reaching the edge of the Popper (in pixels) enable-flip Boolean true Popper into place, it will not flip dynamically when it runs out of space if this is set to false offset-kidding Number 0 Offset in pixels along the trigger element offset-distance Number 8 Offset in pixels away from the trigger element stop-propagation Boolean false Stop propagation event click prevent-default Boolean false Prevent default event click strategy String absolute Describes the positioning strategy to use. If your reference element is in a fixed container, use the fixed strategy content-class String empty Class name for content element Name Description created Created popper component show Show popover hide Hide popover document-click Name Description default For the Popper content reference For Trigger the Popper

Popper also uses a list of predefined CSS variables. You can overwrite these variables to suit your needs.

CSS variable Example value --popper-background #333333 --popper-color #ffffff --popper-padding 8px --popper-radius 4px --popper-arrow-width 8px --popper-arrow-height 8px

# install dependencies
pnpm install

# build dist files
pnpm build

# build dist files and types
pnpm prepublishOnly

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4