vue-polar

A simple Vue component to create polar layouts. Position and rotate around a center-point to arrange elements in a circle or spiral shape. It contains a slot, so you have full control of what to place inside a polar instance.

Vue-polar is a stateless functional component, meaning it is very lightweight and quick to render.

Examples

Some simple demonstations here

• Emoticons arranged in a circle
• Random cats with additional rotation
• A clock: complete with numbers, indicators and hands.
• A colorful spiral,

All completely (and easily) done with vue-polar elements. Do you have other examples how you are using vue-polar? Please let me know.

Project setup

With a package manager

# npm
$ npm install vue-polar

#yarn
$ yarn add vue-polar

For the browser

<script src="unpkg.com/vue-polar@latest/dist/vuePolar.umd.min.js"></script>

How it works

The polar instances rely on absolute positioning around the center of first surrounding element with position: relative. If no such element is encountered, the positioning will be relative to the center of the document.

The instance creates a div that is first centered on the relative element. It is then given a combined transformation: first a rotation, then a translation along its x-axis and finally another (optional) rotation.

How to use

<div style="position:relative; height:500px">
 <polar :angle="45" :offset="'100px'" :setstraight="false">I am rotated by 45 degrees</polar>
 <polar :angle="90" :offset="'100px'" :setstraight="false">I am rotated by 90 degrees</polar>
</div>

Constructor Options

prop	description	default	options
angle	angle of polar rotation in degrees, clockwise from the right	0	Number
offset	translation in direction of the X-axis of the element	'100%'	px, em, pt, %, vh, vw
setstraight	whether to reset the x-axis of the element to horizontal after translation	true	true, false
extrarotation	addtional rotation to apply to element	0	Number
height	height of element	'50px'	px, em, pt, %, vh, vw
width	width of element	'50px'	px, em, pt, %, vh, vw
zindex	value for z-index property	1	Integer
customstyles	Object with CSS properties and values, gets merged with postioning and rotation styles	{}	prop: val

The following properties are not allowed in the customStyles object:

• width
• height
• margin
• transform
• zIndex
• position
• top
• left
• right
• bottom

Some of these will be set directly though the props, and others will be calculated or set in the CSS. Every polar element has a slot where you can provide your own elements and styling, free from these limitations.

License

The MIT License