Wondering what’s next for npm?Check out our public roadmap! »

    vue-cool-burger

    1.0.3 • Public • Published

    vue-cool-burger

    An animated foldout hamburger menu turned into a vue component.

    Edit vue-cool-burger

    component in action

    usage

    Important note: You need a wrapper with a defined width and height for this to work. check out the codesandbox for a quick demo.

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

    then add it to your vue application:

    // add it to your vue application:
    import VueCoolBurger from 'vue-cool-burger';
    import Vue from 'vue';
    
    Vue.use(VueCoolBurger);
    
    // or
    
    import VueCoolBurger from 'vue-cool-burger';
    
    export default {
      components: {
        VueCoolBurger
      }
    }

    props

    props shown with [] are optional

    [color] = '#cdcdcd'

    default color of menu bars

    [cross-color] = '#cdcdcd'

    the color of menu bars after transforming into cross

    [id] = undefined

    if you want to assign an id to the inner checkbox and for to the label around it

    [ariaLabel] = 'main menu'

    [expanded] = false

    should it be rendered in cross form or not

    events

    expanded: Boolean

    emits after the state of menu is changed. emits true if the new state is cross shape.

    credits

    original idea by Erik Terwan. but this works somewhat different now.

    Install

    npm i vue-cool-burger

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    28.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar