vue-extra

Ready to add extra components for VueJS.

Table of Contents

• Overview
  • Installation
  • How to use
    • Inside your template tag
    • Inside your script tag
• Referrence
  • Navbar
    • Color Navbar
    • Change Brand Name
    • Drop Shadow
    • Right Aligned Items
    • Change property after set
  • Header
• Contribution
• Screenshot

Overview

Installation

npm install --save vue-extra

How to use

• Currently the module supports vue-extra/Navbar only. However I will be adding some more elements in future.

Paste inside your template tag

...
<Navbar :navbar="navbar" :style={fontFamily:'arial'}></Navbar>
...

:style attribute is optional that lets you change the style of outer navbar element. variable "navbar" is defined below in javascript code

Paste inside your script tag

Full Example :

import Navbar from 'vue-extra/Navbar'
export default {
  data () {
    return {
      navbar:{
        defaultAlign:'right',  // Default alignment of items in navbar
        backgroundColor:'#222', // background color of navbar
        color:'#ddd', // color of items in navbar
        activeLinkColor:'#f90', // color of .active class link in navbar
        hoverColor:'#ff0', // color when hovered over item
        brand:'Vue<span style="color:#ccc">Extra</span>',
        shadow:true, // shadow effect on navbar
        navItems:[
            {
                name:'Home',
                href:"home",
                class:'active',
            },
            {
                name:'News',
                href:"https://github.com/saurabhdaware",
                router:false, // By default all navItems are rendered as <router-link> by setting router:false we tell code to render element as <a> instead.
            },
            {
                name:'Contact',
                href:"home",
            },
            {
                name:'Login',
                href:'#login',
                align:'right',
                style:{fontWeight:'bold'}
            }
            
        ]

      }
    }
  },
  components:{
    Navbar
  }
}

REFERRENCE

Navbar

Color Navbar

navbar:{
    backgroundColor:'#222',
    color:'#ddd',
    hoverColor:'#fff',
    activeLinkColor:'#09f'
}

Change brand Name

navbar:{
    brand:'CompanyName'
}

or

navbar:{
    brand:'https://image.com/logo.png' // Link of image - This will be rendered as an image
}

Drop shadow

navbar:{
    shadow:true // false
}

Right aligned items

navbar:{
    defaultAlign:'right' // 'left'
}

Change property after set

To change the property that is once set, sadly you have to change the whole navbar object. You can do this like this.navbar = {...this.navbar,color:'#f30'}. Here's example to change color of links after 2 seconds.

mounted(){
  setTimout(()=>{
    this.navbar = {...this.navbar,color:'#f30'}
  },2000)
}

Header

Ummm I am still working on this.

Contribution

• This project is open for contributions you can pick up a task from Issues or Work on a new feature.
• Read CONTRIBUTING.md before contributing for complete guide of Contribution and Local Development.

Screenshot