选项卡( 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 |
关闭选项卡面板。 |
更多建议: