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-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为初始化配置 |