vue-magic-line是用于Vue.js项目的响应式,灵活的选项卡组件。
安装和下载:
# Yarn
$ yarn add vue-magic-line
# NPM
$ npm install vue-magic-line --save
Properties
vue-magic-line
属性 |
描述 |
值 |
默认值 |
secondary |
显示第二行 |
Boolean |
true |
parent |
适用于父母,不链接 |
Boolean |
true |
magic-line-wrapper-css |
类magic-line-wrapper的 CSS |
Object |
{} |
magic-line-item-wrapper-css |
类magic-line-item-wrapper的 CSS |
Object |
{} |
magic-line-item-css |
类magic-line-item的 CSS |
Object |
{} |
magic-line-item-link-css |
类magic-line-item-link的 CSS |
Object |
{} |
magic-line-content-wrapper-css |
类magic-line-content-wrapper的 CSS |
Object |
{} |
primary-color |
主线颜色 |
String |
rgb(0, 188, 212) |
primary-height |
主线高度 |
Number |
3px |
primary-top |
给主线增加一些余量 |
Number |
3px |
secondary-color |
辅助线颜色 |
String |
rgba(211, 211, 211, 0.4) |
secondary-height |
辅助线的高度 |
Number |
2px |
secondary-top |
给第二行增加一些余量 |
Number |
3px |
duration |
魔术线过渡的持续时间(以秒为单位) |
Number |
0.3 |
vue-magic-line-tab
属笥 |
描述 |
值 |
默认值 |
active |
设置活动标签 |
Boolean |
true |
disabled |
禁用标签 |
Boolean |
false |
事件
事件 |
描述 |
参数 |
before-set-primary |
定位主线之前 |
primary-line, tab |
set-primary |
定位主线后 |
primary-line, tab |
before-set-secondary |
放置辅助线之前 |
secondary-line, tab |
set-secondary |
定位辅助线后 |
secondary-line, tab |