GraceUI 组件精细化更新工作进行中~ 如果您在使用时发现组件或样式不生效时,请先进行重新编译,重新编译后依然无效请升级您的 GraceUI 框架版本 ( 网站头部点击下载按钮获取最新版本 )即可! 此次更新预计持续到 2020-01-30 ~
graceNavBar 组件
import graceNav from "../../graceUI/components/graceNavBar.vue"
组件属性
isCenter : {type : Boolean,default : false}, // 是否居中布局 currentIndex : {type : Number,default : 0}, // 激活索引 size : {type : Number,default : 120},// 宽度 单位 rpx items : {type : Array,default : function () { return []}}, // 导航项目 数组形式 activeLineBg : {type : String,default : "linear-gradient(to right, #66BFFF,#3388FF)"}, // 激活条颜色 activeColor:{type : String,default : "#333333"},// 激活文本颜色 activeLineHeight : {type : String,default : '6rpx'},// 激活条高度 activeLineWidth : {type : String,default : "36rpx"}, // 激活条宽度 activeDirection : {type : String, default : ""},// 激活条横向对齐模式,默认 左, center : 居中,flex-end 右侧 color : {type : String,default : "#333333"},// 导航文本颜色 margin : {type : Number,default : 0},// 右侧间距 单位 rpx textAlign : {type : String,default : 'left'},// 文本布局方式 lineHeight : {type : String,default : '50rpx'},// 文本行高 fontSize : {type : String,default : '28rpx'}// 文本大小 padding : {type : String, default : '0rpx'} // 横向内间距
组件事件 - change
点击导航进行切换时会激活 change 事件,并传递对应的索引值;
演示代码