Angular EasyUI 选项卡

选项卡（ TabsComponent ）是显示面板的集合。

属性列表

名称	数据类型	作用描述	默认值
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

字段列表

名称	类型	作用描述
panels	QueryList<LayoutPanelComponent>	所有选项卡面板。

事件列表

名称	参数	作用描述
tabSelect	TabPanelComponent	选择选项卡面板时触发。
tabUnselect	TabPanelComponent	未选择选项卡面板时触发。
tabClose	TabPanelComponent	关闭选项卡面板时触发。

方法列表

名称	参数	返回值	作用描述
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>这是帮助内容。</p>
    </eui-tab-panel>
</eui-tabs>

选项卡面板（ TabsPanelComponent ）

• 选项卡面板（ TabsPanelComponent ）选项继承自面板（ PanelComponent ），以下是附加属性：

名称	数据类型	作用描述	默认值
selected	boolean	是否选择面板。	false
disabled	boolean	是否禁用选项卡面板。	false
closable	boolean	设置为true时，选项卡面板将显示一个可关闭按钮，可以单击该按钮关闭选项卡面板。	false
closed	boolean	选项卡面板是否关闭。	true
showHeader	boolean	是否显示标题。	false
border	boolean	是否显示边框。	false

• 方法列表：

名称	参数	返回值	作用描述
select	none	void	选择选项卡面板。
unselect	none	void	取消选择选项卡面板。
close	none	void	关闭选项卡面板。