vue-extra
Ready to add extra components for VueJS.
Table of Contents
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
......
: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 :
{ 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.
{ }
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.