Skip to content
🍔 vue-burger-button is a functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
bili.config.js
package.json
yarn.lock

README.md

vue-burguer-button

A Vue burger button as functional component, which is faster than a regular component, and is pretty small (JS min+gzip is lower than 700b and CSS min+gzip is lower than 400b).

BurgerButton GIF

Installation

This module is published under NPM registry, so you can install from any package manager.

npm install vue-burger-button --save

# Use the command bellow for Yarn.
yarn add vue-burger-button

Usage

Import the BurgerButton component and its CSS.

<template>
  <burger-button
    :active="isActive"
    @click="isActive = !isActive"
  />
</template>

<script>
  import BurgerButton from 'vue-burger-button';

  export default {
    components: { BurgerButton },
    data: () => ({ isActive: false })
  };
</script>

<style src="vue-burger-button/dist/vue-burger-button.css" />

Usage as global component

If you need <burger-button /> available everywhere, you can register it as a global component and don't forget to import its CSS.

import 'vue-burger-button/dist/vue-burger-button.css';
import Vue from 'vue';
import BurgerButton from 'vue-burger-button';

Vue.component('burger-button', BurgerButton);

Usage from CDN

You can import burger button UMD module and CSS from Unpkg.

<!-- Import vue-burger-button CSS -->
<link rel="stylesheet" href="https://unpkg.com/vue-burger-button@0.1.0/dist/vue-burger-button.css" />

<!-- Import vue-burger-button UMD bundle -->
<script src="https://unpkg.com/vue@2.5.3"></script>
<script src="https://unpkg.com/vue-burger-button@0.1.0"></script>

<script>
  /**
   * vue-burger-button is available through VueBurgerButton.
   */
  console.dir(VueBurgerButton);

  /**
   * Vue.use will add burger button as global component.
   */
  Vue.component('burger-button', VueBurgerButton);
</script>

Props

You can customize your burger button using props.

<template>
  <burger-button
    :active="isActive"
    :bar-color="isActive ? 'red' : 'black'"
    :bar-height="15"
    :bar-width="120"
    @click="isActive = !isActive"
  />
</template>
Name Type Default Description
active Boolean false If true it switches to a close button.
barColor String '#000000' Change the bars colors.
barHeight Number 10 Change the bars heights.
barWidth Number 80 Change the bars widths.

Events

The burger button emits every <button /> events. So, you can use @click, @mouseover etc.

License

Released under MIT License.

You can’t perform that action at this time.