vue-burger v1.1.0

About

Vue Burger is a Vue component/plugin that is a wrapper around Tasty CSS-animated hamburgers, wellknown css library for hamburger icons.

Installation

npm install vue-burger
# or
yarn add vue-burger

Initialization

import App from './App.vue';
import VBurger from 'vue-burger';
import Vue from 'vue';

Vue.use(VBurger);

new Vue({
  render: h => h(App),
}).$mount('#app');

VBurger component can be used in without plugin initialization:

<template>
  <v-burger/>
</template>

<script>
import { VBurger } from 'vue-burger';

export default { 
  component: {
    VBurger
  }
}
</script>

Usage

<template>
  <v-burger type="arrow" />
</template>

Props

type

• type: String,
• default: 'boring'

burgerStyle

• type: Object,
• default: {}

ariaLabel

• type: String,
• default: 'Menu'

ariaControls

• type: String,
• default: 'navigation'

tabIndex

• type: Number,
• default: 0

Types of burger

Available types are:

• 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,
• spring,
• spring-r,
• stand,
• stand-r,
• spin,
• spin-r,
• squeeze,
• vortex,
• vortex-r

You can see all the types in actions on official documentation for Hamburgers.

Styling the burger

For styling regular CSS variables are used. Variables are defined in burgerStyle prop. Available variables:

Example:

<template>
  <v-burger 
    :type="arrow" 
    :burgerStyle="burgerStyle">
  </v-burger>
</template>

<script>
  export default {
    data() {
      return {
        burgerStyle: {
          '--padding': '10px',
          '--layer-bg-color': 'yellow',
          '--active-layer-bg-color': '#ABABAB',
          '--layer-width': '20px',
        }
      }
    }
  }
</script>

Slots

Burger has one named slot for setting label for accessability as suggested by Hamburgers author.

Example:

  <v-burger>
    <template v-slot:label>
      <span class="hamburger-label">Menu</span>
    </template>
  </v-burger>

Events

Burger components emits updated event that exposes the active state. It fires after the burger button is clicked. Check the example for usage.

Example with sync modifier:

  <v-burger 
    @update="isActive = $emit
  </v-burger>

Development

# Running examples
npm run serve

# Running tests
npm run test

# Running build
npm run build

Contributing

All contributions are welcome.

License

MIT @ Zdravko Ćurić (zcuric)

Icon made by Freepik from flaticon.