选择器
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>
输入
名称 |
类型 |
描述 |
默认 |
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<TabPanelComponent> |
所有选项卡面板。 |
事件
名称 |
参数 |
描述 |
tabSelect |
TabPanelComponent |
选择选项卡面板时触发。 |
tabUnselect |
TabPanelComponent |
未选中选项卡面板时触发。 |
tabClose |
TabPanelComponent |
关闭选项卡面板时触发。 |
方法
名称 |
参数 |
返回值 |
描述 |
select |
index:number |
void |
选择选项卡面板。 |
unselect |
index:number |
void |
取消选择选项卡面板。 |
getPanel |
index:number |
TabPanelComponent |
获得一个面板。 |
getPanelIndex |
tab:TabPanelComponent |
number |
获得面板索引。 |
getSelectedPanel |
无 |
TabPanelComponent |
获取第一个选中的选项卡面板。 |
scrollBy |
distance: number |
void |
使用指定的距离滚动选项卡标题。 |