vue-position-after-transform
v0.2.5
Published
reposition elements after css-transform
Downloads
5
Readme
vue-position-after-transform
Why
Because Css is positioning elements before transform, some special positioning is difficult or even impossible.
What
Vue-position-after-transform
does js positioning after css-transform - with the help of getBoundingClientRect
See it in action
Install
npm install --save-dev vue-position-after-transform
or include build/bundle.js
Usage
# link the components up
components:
"vc-pat": require("vue-position-after-transform").parent
"vc-patc": require("vue-position-after-transform").child
# or when using bundle.js:
"vc-pat": window.vueComps.pat
"vc-patc": window.vueComps.patc
# in the template
vc-pat
vc-patc(style="transform:rotate(45deg)") some rotated stuff
see dev/
folder for examples
Props
| Name | type | default | description |
| ---:| --- | ---| --- |
| update | Boolean | false | will update on element resize |
| valign | String | "top" | available: "top", "center", "bottom" |
| halign | String | "left" | available: "left", "center","justify", "right" |
| childwidth | String | "mean" | available: "mean", "actual" or an absolute number; width which is taken to position the children. |
| origin | String | "center" | available: "left", "center", "right"; used in halign: "center" and "justify" to position child relative to given childwidth |
| rotatedParent | Boolean | false | set true
when the component is rotated somehow. This will append the content to body
during calculation, consequently all nested styling will be ignored |
Development
Clone repository
npm install
npm run dev
Browse to http://localhost:8080/
Best development experience in atom with vue-autocompile.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.