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>

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
border boolean 是否顯示邊框。 true
justified boolean 使制表符條與其父容器的寬度相等。 false
narrow boolean 為True時,移除制表符條之間的空格。 false
plain boolean 為True時,用于在沒有背景容器圖像的情況下呈現(xiàn)選項卡條帶。 false
scrollable boolean 為True時,啟用選項卡標(biāo)題上的可滾動特性。 false
scrollIncrement number 每次按下制表符滾動按鈕時要滾動的像素數(shù)。 100
headerWidth number 頭部寬度。 150
headerHeight number 選項卡標(biāo)題高度。 35
tabWidth number 選項卡寬度。 null
tabHeight number 選項卡高度。 32
tabPosition string 標(biāo)簽的位置??蛇x值:'top','bottom','left','right'。 top
selectedIndex number 已初始化的選中制表符索引。 0

事件列表

名稱 參數(shù) 作用描述
onTabSelect panel 選擇選項卡面板時觸發(fā)。
onTabUnselect panel 未選擇選項卡面板時觸發(fā)。
onTabClose panel 關(guān)閉選項卡面板時觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
select index void 選擇一個選項卡面板。
unselect index void 取消選擇選項卡面板。
getPanel index TabPanel 獲得一個選項卡面板。
getPanelIndex tab number 獲取選項卡面板索引。
getSelectedPanel none TabPanel 獲取第一個選中的選項卡面板。
scrollBy distance void 使用指定的距離滾動選項卡。

注:
- 繼承: LocaleBase 。

選項卡面板( TabsPanel )

  • 選項卡面板( TabsPanel )選項繼承自面板( Panel ),以下是附加屬性:
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
showHeader boolean 是否顯示標(biāo)題。 false
border boolean 是否顯示邊框。 false
selected boolean 是否選擇面板。 false
disabled boolean 是否禁用選項卡面板。 false
closable boolean 設(shè)置為true時,選項卡面板將顯示一個可關(guān)閉按鈕,可以單擊該按鈕關(guān)閉選項卡面板。 false

  • 方法列表:
名稱 參數(shù) 返回值 作用描述
select none void 選擇選項卡面板。
unselect none void 取消選擇選項卡面板。
close none void 關(guān)閉選項卡面板。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號