选项卡( Tabs )是显示面板的集合。
用法
1. <Tabs style={{height:250}}>
2. <TabPanel title="Tab1">
3. <p>Tab Panel1</p>
4. </TabPanel>
5. <TabPanel title="Tab2">
6. <p>Tab Panel2</p>
7. </TabPanel>
8. <TabPanel title="Tab3">
9. <p>Tab Panel3</p>
10. </TabPanel>
11. <TabPanel title="Help" closable iconCls="icon-help">
12. <p>This is the help content。</p>
13. </TabPanel>
14. </Tabs>
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| border |
boolean |
是否显示边框。 |
true |
| justified |
boolean |
使制表符条与其父容器的宽度相等。 |
false |
| narrow |
boolean |
为True时,移除制表符条之间的空格。 |
false |
| plain |
boolean |
为True时,用于在没有背景容器图像的情况下呈现选项卡条带。 |
false |
| scrollable |
boolean |
为True时,启用选项卡标题上的可滚动特性。 |
false |
| scrollIncrement |
number |
每次按下制表符滚动按钮时要滚动的像素数。 |
100 |
| headerWidth |
number |
头部宽度。 |
150 |
| headerHeight |
number |
选项卡标题高度。 |
35 |
| tabWidth |
number |
选项卡宽度。 |
null |
| tabHeight |
number |
选项卡高度。 |
32 |
| tabPosition |
string |
标签的位置。可选值:'top','bottom','left','right'。 |
top |
| selectedIndex |
number |
已初始化的选中制表符索引。 |
0 |
事件列表
| 名称 |
参数 |
作用描述 |
| onTabSelect |
panel |
选择选项卡面板时触发。 |
| onTabUnselect |
panel |
未选择选项卡面板时触发。 |
| onTabClose |
panel |
关闭选项卡面板时触发。 |
方法列表
| 名称 |
参数 |
返回值 |
作用描述 |
| select |
index |
void |
选择一个选项卡面板。 |
| unselect |
index |
void |
取消选择选项卡面板。 |
| getPanel |
index |
TabPanel |
获得一个选项卡面板。 |
| getPanelIndex |
tab |
number |
获取选项卡面板索引。 |
| getSelectedPanel |
none |
TabPanel |
获取第一个选中的选项卡面板。 |
| scrollBy |
distance |
void |
使用指定的距离滚动选项卡。 |
注:
- 继承: LocaleBase 。
选项卡面板( TabsPanel )
- 选项卡面板( TabsPanel )选项继承自面板( Panel ),以下是附加属性:
| 名称 |
数据类型 |
作用描述 |
默认值 |
| showHeader |
boolean |
是否显示标题。 |
false |
| border |
boolean |
是否显示边框。 |
false |
| selected |
boolean |
是否选择面板。 |
false |
| disabled |
boolean |
是否禁用选项卡面板。 |
false |
| closable |
boolean |
设置为true时,选项卡面板将显示一个可关闭按钮,可以单击该按钮关闭选项卡面板。 |
false |
| 名称 |
参数 |
返回值 |
作用描述 |
| select |
none |
void |
选择选项卡面板。 |
| unselect |
none |
void |
取消选择选项卡面板。 |
| close |
none |
void |
关闭选项卡面板。 |
更多建议: