Angular EasyUI 選項卡

2020-06-24 17:29 更新

選項卡( TabsComponent )是顯示面板的集合。

屬性列表

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

字段列表

名稱 類型 作用描述
panels QueryList<LayoutPanelComponent> 所有選項卡面板。

事件列表

名稱 參數(shù) 作用描述
tabSelect TabPanelComponent 選擇選項卡面板時觸發(fā)。
tabUnselect TabPanelComponent 未選擇選項卡面板時觸發(fā)。
tabClose TabPanelComponent 關(guān)閉選項卡面板時觸發(fā)。

方法列表

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

注:
- 繼承: None 。
- 選擇器: eui-tabs 。

使用方法

<eui-tabs style="height:250px">
    <eui-tab-panel [title]="'Tab1'">
        <p>Tab Panel1</p>
    </eui-tab-panel>
    <eui-tab-panel [title]="'Tab2'">
        <p>Tab Panel2</p>
    </eui-tab-panel>
    <eui-tab-panel [title]="'Tab3'">
        <p>Tab Panel3</p>
    </eui-tab-panel>
    <eui-tab-panel [title]="'Help'" [closable]="true" iconCls="icon-help">
        <p>這是幫助內(nèi)容。</p>
    </eui-tab-panel>
</eui-tabs>

選項卡面板( TabsPanelComponent )

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

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號