4.3.4 • Published 8 months ago
vue-skycons v4.3.4
Vue Skycons
This was inspired by Skycons -- a set of ten animated weather glyphs, procedurally generated by JavaScript using the HTML5 canvas tag. They're easy to use, and pretty lightweight, so they shouldn't rain on your parade.
Installation
NPM
npm install --save vue-skycons
YARN
yarn add vue-skycons
Examples
Register Component
import Vue from "vue";
import Skycon from "vue-skycons";
Vue.component("skycon", Skycon);
Using Component
<template>
<div>
<!-- all icons -->
<skycon condition="clear-day" />
<skycon condition="clear-night" />
<skycon condition="partly-cloudy-day" />
<skycon condition="partly-cloudy-night" />
<skycon condition="cloudy" />
<skycon condition="rain" />
<skycon condition="sleet" />
<skycon condition="snow" />
<skycon condition="wind" />
<skycon condition="fog" />
<!-- all attributes -->
<skycon condition="rain" size="128" color="orangered" paused @load="console.log" />
</div>
</template>
<script>
import Skycon from "vue-skycons";
export default {
components: {
Skycon
}
}
Available props
// Weather condition
condition: {
type: String,
required: true,
},
// Icon size
size: {
type: [Number, String],
default: 64,
},
// Icon color
color: {
type: String,
default: "black",
},
// Start with paused animation
paused: {
type: Boolean,
default: false,
},
// The animation speed
speed: {
type: [Number, String],
default: 1
}
Event example
<template>
<skycon condition="snow" size="128" paused @load="onLoad" />
</template>
<script>
export default {
methods: {
onLoad(player) {
console.log("loaded");
setInterval(() => {
if (player.paused) {
player.play();
} else {
player.pause();
}
}, 1000);
},
},
};
</script>
Animation Speed
The speed
attributes is a decimal number to control the animation speed. It is a multiplyer to the original speed. 1
means the normal speed. 0.5
means half the normal speed. 2
means twice as fast as the normal speed.
<template>
<skycon condition="wind" size="128" speed="1" />
<skycon condition="wind" size="128" speed="3" />
<skycon condition="wind" size="128" speed="0.5" />
</template>
4.3.2
8 months ago
4.3.1
8 months ago
4.3.4
8 months ago
4.3.3
8 months ago
4.3.0
10 months ago
4.2.0
3 years ago
4.1.0
3 years ago
4.1.1
3 years ago
4.0.5
4 years ago
4.0.3
4 years ago
4.0.1
4 years ago
4.0.2
4 years ago
4.0.0
4 years ago
3.1.3
4 years ago
3.1.2
4 years ago
3.2.0
4 years ago
3.1.1
4 years ago
3.1.0
4 years ago
3.0.0
4 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago