Tabs 标签页

选项卡切换组件。

何时使用 #

提供平级的区域将大块内容进行收纳和展现,保持界面整洁。

借鉴了Material Design中 Tabs 的代码设计

代码演示

默认选中第一项。

禁用某一项。

有图标的标签。

可以左右、上下滑动,容纳更多标签。

可以在页签右边添加附加操作。

用在弹出框等较狭窄的容器内。

改变Tab位置。

另一种样式的页签,不提供对应的垂直样式。

只有卡片样式的页签支持新增和关闭选项。

API

nz-tabset

参数 说明 类型 默认值
nzSelectedIndex 当前激活的Tab Index,支持双向绑定 Number 0
nzSelectedIndexChange 当前激活的Tab Index回调 Func
nzSelectChange 当前激活的Tab与Index值回调 Func
nzShowPagination 超出高度或宽度后是否显示滑动按钮 Boolean true
#nzTabBarExtraContent tab bar 上额外的元素 ng-template
nzType 页签的基本样式,可选 linecard 类型 String 'line'
nzSize 大小,提供 defaultsmall 两种大小 String 'default'
nzAnimated 是否使用动画切换 Tabs,在 nzTabPosition=top|bottom 时有效 boolean | {{ '{' }}inkBar:boolean, tabPane:boolean{{ '}' }} true
nzTabPosition 页签位置,可选值有 top right bottom left String 'top'

nz-tab

参数 说明 类型 默认值
#nzTabHeading 选项卡头显示内容 ng-template
nzDisabled 是否可被选中 Boolean false
nzClick 点击选中事件回调 EventEmitter
nzSelect 被选中后事件回调 EventEmitter
nzDeselect 不被选中事件回调 EventEmitter