标签页

简介

abp-tab 是基于 Bootstrap 标签页元素派生的基础标签页导航内容容器。

基础用法：

<abp-tabs>
    <abp-tab title="首页">
             首页内容
    </abp-tab>
    <abp-tab-link title="链接" href="#" />
    <abp-tab title="个人资料">
            个人资料内容
    </abp-tab>
    <abp-tab-dropdown title="联系方式" name="ContactDropdown">
        <abp-tab title="联系方式1" parent-dropdown-name="ContactDropdown">
            联系方式1内容
        </abp-tab>
        <abp-tab title="联系方式2" parent-dropdown-name="ContactDropdown">
            联系方式2内容
        </abp-tab>
    </abp-tab-dropdown>
</abp-tabs>

演示

查看 标签页演示页面 以观看实际效果。

abp-tab 属性

• title：设置标签页菜单的文本
• name：设置生成元素的 "id" 属性。默认值为 Guid。除非使用 Jquery 更改或修改标签页，否则无需设置
• active：设置活动标签页

示例：

<abp-tabs name="TabId">
    <abp-tab name="nav-home" title="首页">
        首页内容
    </abp-tab>   
    <abp-tab name="nav-profile" active="true" title="个人资料">
        个人资料内容
    </abp-tab>
    <abp-tab name="nav-contact" title="联系方式">
        联系方式内容
    </abp-tab>
</abp-tabs>

胶囊样式

示例：

<abp-tabs tab-style="Pill">
    <abp-tab title="首页">
         首页内容
    </abp-tab>
    <abp-tab title="个人资料">
         个人资料内容
    </abp-tab>
    <abp-tab title="联系方式">
         联系方式内容
    </abp-tab>
</abp-tabs>

垂直布局

vertical-header-size：设置标签页标题的列宽

示例：

<abp-tabs tab-style="PillVertical" vertical-header-size="_2" >
    <abp-tab active="true" title="首页">
        首页内容
    </abp-tab>   
    <abp-tab title="个人资料">
        个人资料内容
    </abp-tab>
    <abp-tab title="联系方式">
        联系方式内容
    </abp-tab>
</abp-tabs>