Tabs

Based on Bootstrap tab.

Example

Content_Home
Content_Profile
Content_1_Content
Content_2_Content 

<abp-tabs>
    <abp-tab title="Home">
             Content_Home
    </abp-tab>
    <abp-tab-link title="Link" href="#" />
    <abp-tab title="profile">
            Content_Profile
    </abp-tab>
    <abp-tab-dropdown title="Contact" name="ContactDropdown">
        <abp-tab title="Contact 1" parent-dropdown-name="ContactDropdown">
            Content_1_Content
        </abp-tab>
        <abp-tab title="Contact 2" parent-dropdown-name="ContactDropdown">
            Content_2_Content
        </abp-tab>
    </abp-tab-dropdown>
</abp-tabs>


<div>
    <ul class="nav nav-tabs" id="48c14227782f4edab7f153b413ac1429" role="tablist">
        <li class="nav-item"><a class="nav-link active" id="48c14227782f4edab7f153b413ac1429_0-tab" data-bs-toggle="tab" href="#48c14227782f4edab7f153b413ac1429_0" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_0" aria-selected="true">Home</a></li>
        <li class="nav-item"><a class="nav-link" id="LinkId-tab" href="#">Link</a></li>
        <li class="nav-item"><a class="nav-link" id="48c14227782f4edab7f153b413ac1429_2-tab" data-bs-toggle="tab" href="#48c14227782f4edab7f153b413ac1429_2" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_2" aria-selected="false">profile</a></li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="ContactDropdown-tab" data-bs-toggle="dropdown" href="#ContactDropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact</a><div class="dropdown-menu">
                <a class="dropdown-item" id="48c14227782f4edab7f153b413ac1429_3-tab" href="#48c14227782f4edab7f153b413ac1429_3" data-bs-toggle="tab" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_3" aria-selected="false">Contact 1</a>
                <a class="dropdown-item" id="48c14227782f4edab7f153b413ac1429_4-tab" href="#48c14227782f4edab7f153b413ac1429_4" data-bs-toggle="tab" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_4" aria-selected="false">Contact 2</a>
            </div>
        </li>
    </ul>
    <div class="tab-content" id="48c14227782f4edab7f153b413ac1429Content">
        <div class="tab-pane fade show active" id="48c14227782f4edab7f153b413ac1429_0" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_0-tab">
              Content_Home
        </div>
        <div class="tab-pane fade" id="48c14227782f4edab7f153b413ac1429_2" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_2-tab">
              Content_Profile
        </div>
        <div class="tab-pane fade" id="48c14227782f4edab7f153b413ac1429_3" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_3-tab">
              Content_1_Content
        </div>
        <div class="tab-pane fade" id="48c14227782f4edab7f153b413ac1429_4" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_4-tab">
              Content_2_Content
        </div>
    </div>
</div>

Tab attributes

Content_Home
Content_Profile
Content_Contact 

<abp-tabs name="TabId">
    <abp-tab name="nav-home" title="Home">
        Content_Home
    </abp-tab>   
    <abp-tab name="nav-profile" active="true" title="profile">
        Content_Profile
    </abp-tab>
    <abp-tab name="nav-contact" title="Contact">
        Content_Contact
    </abp-tab>
</abp-tabs>


<div>
    <ul class="nav nav-tabs" id="TabId" role="tablist">
        <li class="nav-item"><a class="nav-link" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="false">Home</a></li>
        <li class="nav-item"><a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">profile</a></li>
        <li class="nav-item"><a class="nav-link active show" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="true">Contact</a></li>
    </ul>
    <div class="tab-content" id="TabIdContent">
        <div class="tab-pane fade" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
             Content_Home
        </div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
             Content_Profile
        </div>
        <div class="tab-pane fade active show" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
             Content_Contact
        </div>
    </div>
</div>
  • name: Sets "id" attribute of generated elements. Default value is a Guid. Not needed unless tabs are changed or modified with Jquery.
  • active: Sets the active tab.

Pill Example

Content_Home
Content_Profile
Content_Contact 

<abp-tabs tab-style="Pill">
    <abp-tab title="Home">
         Content_Home
    </abp-tab>
    <abp-tab title="profile">
         Content_Profile
    </abp-tab>
    <abp-tab title="Contact">
         Content_Contact
    </abp-tab>
</abp-tabs>



<div>
    <ul class="nav nav-pills" id="2eaad131e42c4a90962fcb3c4e55c946" role="tablist">
        <li class="nav-item"><a class="nav-link active" id="2eaad131e42c4a90962fcb3c4e55c946_0-tab" data-bs-toggle="pill" href="#2eaad131e42c4a90962fcb3c4e55c946_0" role="tab" aria-controls="2eaad131e42c4a90962fcb3c4e55c946_0" aria-selected="true">Home</a></li>
        <li class="nav-item"><a class="nav-link" id="2eaad131e42c4a90962fcb3c4e55c946_1-tab" data-bs-toggle="pill" href="#2eaad131e42c4a90962fcb3c4e55c946_1" role="tab" aria-controls="2eaad131e42c4a90962fcb3c4e55c946_1" aria-selected="false">profile</a></li>
        <li class="nav-item"><a class="nav-link" id="2eaad131e42c4a90962fcb3c4e55c946_2-tab" data-bs-toggle="pill" href="#2eaad131e42c4a90962fcb3c4e55c946_2" role="tab" aria-controls="2eaad131e42c4a90962fcb3c4e55c946_2" aria-selected="false">Contact</a></li>
    </ul>
    <div class="tab-content" id="2eaad131e42c4a90962fcb3c4e55c946Content">
        <div class="tab-pane fade show active" id="2eaad131e42c4a90962fcb3c4e55c946_0" role="tabpanel" aria-labelledby="2eaad131e42c4a90962fcb3c4e55c946_0-tab">
               Content_Home
        </div>
        <div class="tab-pane fade" id="2eaad131e42c4a90962fcb3c4e55c946_1" role="tabpanel" aria-labelledby="2eaad131e42c4a90962fcb3c4e55c946_1-tab">
               Content_Profile
        </div>
        <div class="tab-pane fade" id="2eaad131e42c4a90962fcb3c4e55c946_2" role="tabpanel" aria-labelledby="2eaad131e42c4a90962fcb3c4e55c946_2-tab">
               Content_Contact
        </div>
    </div>
</div>

Vertical Example

Content_Home
Content_Profile
Content_Contact 

<abp-tabs tab-style="PillVertical" vertical-header-size="_2" >
    <abp-tab active="true" title="Home">
        Content_Home
    </abp-tab>   
    <abp-tab title="profile">
        Content_Profile
    </abp-tab>
    <abp-tab title="Contact">
        Content_Contact
    </abp-tab>
</abp-tabs>



<div class="row">
    <div class="col-2">
        <ul class="nav flex-column  nav-pills" id="2f347a2276af424ebbd67f85653edf1f" role="tablist">
            <li class="nav-item"><a class="nav-link active" id="2f347a2276af424ebbd67f85653edf1f_0-tab" data-bs-toggle="pill" href="#2f347a2276af424ebbd67f85653edf1f_0" role="tab" aria-controls="2f347a2276af424ebbd67f85653edf1f_0" aria-selected="true">Home</a></li>
            <li class="nav-item"><a class="nav-link" id="2f347a2276af424ebbd67f85653edf1f_1-tab" data-bs-toggle="pill" href="#2f347a2276af424ebbd67f85653edf1f_1" role="tab" aria-controls="2f347a2276af424ebbd67f85653edf1f_1" aria-selected="false">profile</a></li>
            <li class="nav-item"><a class="nav-link" id="2f347a2276af424ebbd67f85653edf1f_2-tab" data-bs-toggle="pill" href="#2f347a2276af424ebbd67f85653edf1f_2" role="tab" aria-controls="2f347a2276af424ebbd67f85653edf1f_2" aria-selected="false">Contact</a></li>
        </ul>
    </div>
    <div class="col-10">
        <div class="tab-content" id="2f347a2276af424ebbd67f85653edf1fContent">
            <div class="tab-pane fade show active" id="2f347a2276af424ebbd67f85653edf1f_0" role="tabpanel" aria-labelledby="2f347a2276af424ebbd67f85653edf1f_0-tab">
                 Content_Home
            </div>
            <div class="tab-pane fade" id="2f347a2276af424ebbd67f85653edf1f_1" role="tabpanel" aria-labelledby="2f347a2276af424ebbd67f85653edf1f_1-tab">
                 Content_Profile
            </div>
            <div class="tab-pane fade" id="2f347a2276af424ebbd67f85653edf1f_2" role="tabpanel" aria-labelledby="2f347a2276af424ebbd67f85653edf1f_2-tab">
                 Content_Contact
            </div>
        </div>
    </div>
</div>
  • vertical-header-size: Sets the column width of tab headers.