Tabs 标签页
选项卡切换组件，用于同级别数据的分类及切换 API文档 组件问题反馈和讨论使用方法
- 分隔同级别但不同属性的内容，支持用户快速切换对比
基础样式 #
使用基础样式一定要保证结构与class按照代码展示要求布局，否则会失效,基础样式的tab是选项卡是根据位置来进行查找，nv-tab为最基础简单的标签页，nv-tab-action为默认选项，nv-tab-show表示内容框展示- Tab1
- Tab2
- Tab3
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
基础样式嵌套 #
就是在某一个tab选项卡里支持层层嵌套- Tab1
- Tab2
- Tab3
- inner Tab1
- inner Tab2
- inner Tab3
Content of inner Tab Pane 1
Content of inner Tab Pane 2
Content of inner Tab Pane 3
Content of Tab Pane 2
- inner Tab other 1
- inner Tab other 2
- inner Tab other 3
Content of inner other Tab Pane 1
Content of inner other Tab Pane 2
Content of inner other Tab Pane 3
禁用样式 #
基于基础样式之上，在nv-tab-item后面添加nv-tab-disable属性即可,当点击到禁用选项卡时则默认选择其前一个- Tab1
- Tab2
- Tab3
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
带图标 #
基于基础样式之上，在nv-tab后面加nv-tab-icon属性即可展示图标版本的步骤条，icon使用方法详情见Icon 图标
Nv.use("tab",function(nv,tab){
tab.init({
target:".nv-tab-icon"
});
})
显示代码
卡片式标签 #
基于基础样式之上，在nv-tab之后添加nv-tab-card属性则样式变为卡片的形式展示- Tab1
- Tab2
- Tab3
Content of Tab Pane 1
Content of Tab Pane 2
Content of Tab Pane 3
Iframe的选项卡 #
这个其实很简单，首先设置初始化type为iframe，然后再内容区域nv-tab-tabpane里面嵌套对应的iframe信息即可，不过为了提高加载性能，请使用data-src来赋值，组件检测到后会自动转化成src。如果已转化则不做任何操作。- Tab1
- Tab2
- Tab3
可编辑标签 #
编辑类的tab选项卡结构要保持,同时target必须是ID，其他选择器将会默认选取第一条；同时编辑属于高级特性，需要在初始化配置type为edit类型，全面支持普通模式与iframe模式，同时提供跨域解决方案，所有选项卡都有唯一ID,重复调用同一个ID只会选中相同的选项卡，使用情况请参考以下demo代码展示与Config配置- Tab1
- Tab2
one
two
options配置 #
tab.init(options)的配置选项，以下部分是type类型base和iframe的使用场景配置|
属性
|
类型（是否必要）
|
描述
|
|---|
|
language
|
string (选填)
|
目前支持zh-CN(默认)和EN两种选择，可以拓展，不设置读取默认组件库配置
|
|
target
|
string (选填)
|
选择器，支持class、id、element,@注意：type模式为edit时候只能是id
|
|
type
|
string (选填)
|
可选参数:
'base'(默认)基础类型，需要Dom结构已存在，否则无法初始化 'iframe' 需要初始化在iframe节点上添加data-src完成初始化配置，优化加载效率 'edit' 支持初始化节点和动态添加节点，同时支持iframe加载，要保证结构统一 |
|
eventName
|
String (选填)
|
事件名称，默认是click
|
|
isClose
|
boolean (选填)
|
是否开启关闭选项卡模式，此模式只有在type为edit状态才会生效，默认是false
|
|
isMenu
|
string (选填)
|
是否开启菜单选项卡模式，此模式只有在type为edit状态才会生效，默认是false
|
|
onChange
|
Function (选填)
|
1.3.3+，此为1.3.3新增功能，请及时升级
当发生tab选项卡切换的时候触发 回调参数Function(options) 默认里面指针指向选中tab选项卡，options为初始化配置 |