Vue pushpin

a simple pushpin

Version: 1.0.0 Updated: 09/18/2016

By: vue-comps License: MIT

Downloads Last 30 Days: 132

Install

npm i vue-pushpin
yarn add vue-pushpin

Repository: https://github.com/vue-comps/vue-pushpin

CDNs

bundle.run: https://bundle.run/vue-pushpin

jsDelivr: https://cdn.jsdelivr.net/npm/vue-pushpin

unpkg: https://unpkg.com/vue-pushpin

vue-pushpin

Fixed positioning, which respects header and footer.

Demo

Install

npm install --save-dev vue-pushpin

or include build/bundle.js.

Usage

# in your component
components:
  "pushpin": require("vue-pushpin")
# or, when using bundle.js
components:
  "pushpin": window.vueComps.pushpin
<pushpin>
  <div>content</div>
</pushpin>

The pushpin will change its position to absolute, so it should be positioned relative to body.

For examples see dev/.

Props

Name type default description
top Number 0 minimum distance to document top (header height)
offset Number 0 distance to the viewport top on scrolling (should be smaller than top)
bottom Number 0 minimum distance to document bottom (footer height)

Changelog

  • 1.0.0
    some cleaning
    added unit tests

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Categories: Vue js