@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TabsModel
@{
    ViewData["Title"] = "Tabs";
}

<h2>Tabs</h2>

<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p>

<h4># Most Simple Tabs Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-tabs>
            <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>
    <div class="code-area">
        <pre>
&lt;abp-tabs name=&quot;TabId&quot;&gt;
    &lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
        Content_Home
    &lt;/abp-tab&gt;   
    &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
        Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
        Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
    </div>
</div>

<h4># Tabs With Name Attiribute Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <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>
    <div class="code-area">
        <pre>
&lt;abp-tabs name=&quot;TabId&quot;&gt;
    &lt;abp-tab name=&quot;nav-home&quot; title=&quot;Home&quot;&gt;
        Content_Home
    &lt;/abp-tab&gt;   
    &lt;abp-tab name=&quot;nav-profile&quot; active=&quot;true&quot; title=&quot;profile&quot;&gt;
        Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
        Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
    </div>
</div>

<h4># Pill Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-tabs tab-style="Pill">
            <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>
    <div class="code-area">
        <pre>
&lt;abp-tabs name=&quot;TabId&quot;   tab-style=&quot;Pill&quot; &gt;
    &lt;abp-tab name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
        Content_Home
    &lt;/abp-tab&gt;   
    &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
        Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
        Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
    </div>
</div>

<h4># Vertical Example</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <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>
    <div class="code-area">
        <pre>
&lt;abp-tabs name=&quot;TabId&quot;  tab-style=&quot;Pill&quot; vertical-header-size=&quot;_2&quot; &gt;
    &lt;abp-tab name=&quot;nav-home&quot; active=&quot;true&quot; title=&quot;Home&quot;&gt;
        Content_Home
    &lt;/abp-tab&gt;   
    &lt;abp-tab name=&quot;nav-profile&quot; title=&quot;profile&quot;&gt;
        Content_Profile
    &lt;/abp-tab&gt;
    &lt;abp-tab name=&quot;nav-contact&quot; title=&quot;Contact&quot;&gt;
        Content_Contact
    &lt;/abp-tab&gt;
&lt;/abp-tabs&gt;
</pre>
    </div>
</div>