React EasyUI 选项卡
选项卡（ 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 | 关闭选项卡面板。 |