选项卡切换组件。
提供平级的区域将大块内容进行收纳和展现,保持界面整洁。
借鉴了Material Design中 Tabs 的代码设计
默认选中第一项。
禁用某一项。
有图标的标签。
可以左右、上下滑动,容纳更多标签。
可以在页签右边添加附加操作。
用在弹出框等较狭窄的容器内。
改变Tab位置。
另一种样式的页签,不提供对应的垂直样式。
只有卡片样式的页签支持新增和关闭选项。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzSelectedIndex | 当前激活的Tab Index,支持双向绑定 | Number | 0 |
nzSelectedIndexChange | 当前激活的Tab Index回调 | Func | |
nzSelectChange | 当前激活的Tab与Index值回调 | Func | |
nzShowPagination | 超出高度或宽度后是否显示滑动按钮 | Boolean | true |
nzTabBarExtraTemplate | 用于指定 tab bar 上特定的额外的元素 | TemplateRef | 无 |
#nzTabBarExtraContent | tab bar 上额外的元素 | ng-template | 无 |
nzType | 页签的基本样式,可选 line 、card 类型
|
String | 'line' |
nzSize | 大小,提供 default 和 small 两种大小
|
String | 'default' |
nzAnimated | 是否使用动画切换 Tabs,在 nzTabPosition=top|bottom 时有效
|
boolean | {{ '{' }}inkBar:boolean, tabPane:boolean{{ '}' }} | true |
nzTabPosition | 页签位置,可选值有 top right bottom left
|
String | 'top' |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
#nzTabHeading | 选项卡头显示内容 | ng-template | 无 |
nzDisabled | 是否可被选中 | Boolean | false |
nzClick | 点击选中事件回调 | EventEmitter | |
nzSelect | 被选中后事件回调 | EventEmitter | |
nzDeselect | 不被选中事件回调 | EventEmitter |