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.
To 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
To 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.
