1.1.2 • Published 4 years ago

vue-hamburgers v1.1.2

Weekly downloads
11
License
MIT
Repository
github
Last release
4 years ago

Vue Hamburgers

npm.io npm.io

node.js vue.js

Display a burger for menu as component, fork from github.com/jonsuh/hamburgers, you can choose hamburger animation with prop type. Check jonsuh.com/hamburgers for examples.

Documentation

Install it with Yarn or NPM

yarn add -vue-hamburgers

OR

npm i vue-hamburgers --save

Import it, ES6 way, in main.js / app.js file

import hamburger from 'vue-hamburgers'

Vue.use(hamburger)

For Nuxt.js

Create a plugin like plugins/vue-hamburgers.js

import Vue from 'vue'
import hamburger from 'vue-hamburgers'

Vue.use(hamburger)

In nuxt.config.js import plugin

export default {
  // ...
  plugins: [
    { src: '@/plugins/vue-hamburgers', mode: 'client' },
  ],
  // ...
}

In any .vue component import in with <client-only>

<template>
  <client-only>
    <hamburger />
  </client-only>
</template>

Usage

Use it in a .vue file

<template>
  <div>
    <hamburger />
  </div>
</template>

Define type with prop type

<div>
  <hamburger type="3dx" />
</div>

API

<template>
  <hamburger
    type="spring"
    :width="30"
    :height="3"
    :spacing="0.8"
    color="red"
  />
</template>

Check all available type on jonsuh.com/hamburgers, use it in lowercase like this type="arrow"

PropsTypeDefaultDescribe
typeString'spring'Type of hamburger animation
widthNumber / String40Define width of hamburger
heightNumber / String4Define height of bars of hamburger
spacingNumber / String1Define spacing between bars of hamburger, reduce with '0.8' or increase with '1.2'
colorString#000000Set color with hexa code

License

MIT © @jonsuh, @ewilan-riviere

1.1.2

4 years ago

1.1.1

4 years ago

1.0.2

4 years ago

1.1.0

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago