React EasyUI 选项卡

2020-09-10 09:33 更新

选项卡( 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 关闭选项卡面板。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号