Tabs

组件参数

<nly-tabs>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
tag
String'div'标签
fill
Booleanfalsenav元素(切换按钮)填充整个card宽度,但并不是每个nav元素(切换按钮)宽度都会相同
justified
Booleanfalsenav元素(切换按钮)填充整个card宽度,每个nav元素(切换按钮)宽度都会相同
align
Stringnullnav元素(切换按钮)文字对齐方式, 可选 'start' ('left'), 'center', 'end' ('right')
tabs-right
Booleanfalse
pills
Booleanfalsetab切换nav元素(切换按钮)渲染为圆角按钮形状
vertical
Booleanfalse垂直tab
small
Booleanfalse小号nav元素(切换按钮)
card
Booleanfalse设置true会渲染成nly-card
end
Booleanfalse设置为true,水平tab会把nav元素(切换按钮)放到底部,垂直tab会把nav元素(切换按钮)放到右侧
no-fade
Booleanfalse无动画,设置true关闭动画
no-nav-style
Booleanfalse不渲染nav的css式样
no-key-nav
Booleanfalse禁用选项卡控件的键盘导航
lazy
Booleanfalse懒加载
content-class
String or Array or Objecttab-content元素自定义css
nav-class
String or Array or Objectnav自定义css
nav-wrapper-class
String or Array or Objectwraaper元素自定义css
active-nav-item-class
String or Array or Object选项卡渲染成nav-item时激活css
active-tab-class
String or Array or Objecttab选项卡激活css
value
v-model
Numbernull当前可见的选项卡值

v-model

PropertyEvent
valueinput

Slots

Slot NameDescription
tabs-start 在有内容的选项卡前面添加没有内容的选项卡
tabs-end 在有内容的选项卡最后面添加没有内容的选项卡
empty 当没有tab时渲染

Events

EventArgumentsDescription
input
  1. tabIndex - 当前可见tab的index
更新v-model值时触发
activate-tab v0.4.4+
  1. newTabIndex - tab激活之后的index
  2. prevTabIndex - 当前激活的tab的index,如果没有激活,那么默认为-1
  3. nlyEvt - NlyEvent对象. 防止冒泡
准备激活tab之前的index
changed
  1. currentTabs - 当前tabs中tab集合
  2. previousTabs - 未更新之前的tabs的tab集合
当一个tab被移除或者重新排序,或者新增一个tab时触发

<nly-tab>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
active
Booleanfalse设置 true 处于激活状态
tag
String'div'标签
button-id
String如果传入, 则可设置一个按钮来操作对应id的nly-tab可见状态,如果没用传入,会自动生成一个
title
String''标题文字
title-item-class
String or Array or Object选项卡控制器 li标签的 自定义css
title-link-class
String or Array or Object选项卡控制器里包裹的a标签自定义css
title-link-attributes
v0.4.4+
Object选项卡控制器里包裹的a标签 attributes属性
disabled
Booleanfalse禁用,设置true为禁用状态
no-body
Booleanfalse
lazy
Booleanfalse懒加载

Slots

Slot NameDescription
title tab标题插槽

Events

EventArgumentsDescription
click
  1. evt - 原生事件
点击tab时触发

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-tabs>NlyTabsnly-adminlte-vue
<nly-tab>NlyTabnly-adminlte-vue

例子

import { NlyTabs } from 'nly-adminlte-vue'
Vue.component('nly-tabs', NlyTabs)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
TabsPluginnly-adminlte-vue

例子

import { TabsPlugin } from 'nly-adminlte-vue'
Vue.use(TabsPlugin)