Page tree

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已改变。

...

当前组件的名称, 没特殊要求,当前窗口唯一,字符串。

初始化选中面板的key

初始化选中面板的 key,必填。

 

tabPosition

页签位置,可选值有 top、right、bottom、left,String型。
 

 

类型

页签的基本样式,可选 line、card、editable-card 类型,String型。

defaultActiveKey

...

 属性接收一个字符串类型的值,这个值要和 TabPane 组件的 key 属性值相匹配。当组件首次渲染时,Tabs 会把 defaultActiveKey 对应的 TabPane 设为激活状态

页签位置

页签位置,可选值有 top、right、bottom、left。

页签基本样式

可选 linecard 、editable-card 类型

 

1. type="line"(默认值)

这是 Tabs 组件的默认类型,标签页以线条样式展示,激活的标签下方会有一条下划线。

 

2. type="card"

标签页以卡片样式展示,每个标签都有一个卡片边框,激活的标签会有不同的背景颜色。


3. type="editable-card"

这种类型是在 card 类型的基础上增加了可编辑的功能,标签页右侧会显示添加和删除标签的按钮。


tab bar的自定义样式

自定义标签栏的样式。借助这个属性,你能对标签栏的背景颜色、字体样式、内边距等进行修改。

 

Code Block
languagecss
{
backgroundColor: '#f0f0f0',
padding: '10px',
borderBottom: '1px solid #ccc'
};


切换页签时使用动画

是否使用动画切换 Tabs,在 tabPosition=top|bottom 时有效。

显示‘添加’按钮

页签基本样式 type="editable-card"时生效

显示徽标

如果勾选,则会在Tab页签的标题后显示徽标数

徽标显示样式

徽标(默认):使用 AntD Badge 组件包裹标签内容。

行内文本:在标签文本后显示括号包裹的数字,如果数字大于 99,则显示为 '99+'

操作按钮

参见:Card

可见

是否在页面展示。