閱讀(1.5k) 書簽贊(0) 我要糾錯

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	關閉選項卡面板時觸發(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時，選項卡面板將顯示一個可關閉按鈕，可以單擊該按鈕關閉選項卡面板。	false
closed	boolean	選項卡面板是否關閉。	true
showHeader	boolean	是否顯示標題。	false
border	boolean	是否顯示邊框。	false