vue-simple-hamburger v0.5.1
What are we talking about
We are talking about a Vue porting and translation of this (https://jonsuh.com/hamburgers/) component . This is css based (no sass/scss). Its possible to change the style variables using directly its props.
How to install
npm install vue-simple-hamburger
How to use
import App from './App.vue';
import VSimpleHamburger from 'vue-simple-hamburger';
import Vue from 'vue';
Vue.use(VSimpleHamburger);
new Vue({
render: h => h(App),
}).$mount('#app');
or without plugin initialization...
<template>
<v-simple-hamburger :active="hamburger" @click="hamburger = !hamburger"/>
</template>
<script>
import VSimpleHamburger from 'vue-simple-hamburger';
export default {
components: {
VSimpleHamburger
},
data () {
return {
hamburger: false
}
}
}
</script>
Props
active
- type:
Boolean
, - default:
false
- type:
fx
- type:
String
, - default:
boring
- type:
px
- type:
String
, - default:
15px
- type:
py
- type:
String
, - default:
15px
- type:
width (of the single layer)
- type:
String
, - default:
40px
- type:
height (of the single layer)
- type:
String
, - default:
4px
- type:
spacing (of the single layer)
- type:
String
, - default:
6px
- type:
color
- type:
String
, - default:
#000
- type:
borderRadius
- type:
String
, - default:
4px
- type:
hoverOpacity
- type:
String
, - default:
0.7
- type:
activeColor
- type:
String
, - default:
#000
- type:
activeHoverOpacity
- type:
String
, - default:
0.7
- type:
Effects:
prop fx
can be set with one of the following options
- 3dx
- 3dx-r
- 3dy
- 3dy-r
- 3dxy
- 3dxy-r
- arrow
- arrow-r
- arrowalt
- arrowalt-r
- arrowturn
- arrowturn-r
- boring
- collapse
- collapse-r
- elastic
- elastic-r
- emphatic
- emphatic-r
- minus
- slider
- slider-r
- spin
- spin-r
- spring
- spring-r
- stand
- stand-r
- squeeze
- vortex
- vortex-r
You can see all the types in actions on official documentation for Hamburgers.
Events
The component simply emits click
once mouse in clicked over.
You have to set the active prop by yourself in order to make the hamburger 'reactive'
IE11 support?
You have to use polyfill because we are using vars in css
Doubts ?
No reaction when clicked!
The component itself doesn't change the active prop. You have to listen the click
event and then change the active
prop value!
License
MIT @ Davide Turrini (davide-turrini)
(Please note: This is my first try to publish something on npm! Any kind of feedback or contribution is more than welcome)
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago