Vue Polar examples
This page contains a few examples of Vue Polar complete with code samples. Vue Polar is a VueJS component, that can be used to easily create polar (circular, spiral) layouts.
These are all working examples, so you can inspect and play with the source code. Add the following lines
to your <head> section to start using Vue Polar:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-polar@latest/dist/vuePolar.umd.min.js"></script>Simple circular arrangement
Basic example, using all the default values, except for the angle. The Polar component has a single slot for custom content.
Random cat pictures
The slot holds a random cat picture. This example sets part of the props by using a propsobject and
v-bind. Note that setstraight is set to false, preventing the element to
be rotated back to horizontal.
Several Polar instances are generated in a v-for loop. The angle is derived from the loop counter.
Colorful spiral
You can get clever in v-for loops, and dynamically set various props.
Here is an example that adjusts: size, angle, offset and color
for every loop. Using a negative value for the angle, gives a counter-clockwise rotation.
Vue Polar is a stateless "functional component", meaning that is does not have the overhead of a Vue component. That should make it real quick and there should be no noticeable lag from creating 1,000 instances.
A clock (that works)
The template of this clock consists strictly of six (looped) Vue Polar instances, with the zindex
taking care that they are presented in the correct order. To get the
angle for the hands, we need to correct by -90 degrees: CSS rotation starts from the right,
where a clock starts from the top.