Tabs TabStrip control

Tabs control renders a tabstrip that contains a collection of one or more tabs. The content of the tab is taken from an existing div or set as a parameter.
aweshow event is triggered on the tab div, when a tab is shown, this can be used to modify or load the tab content.

Tabs overview

content for tab 1
content for custom button tab
partial view 1 content
Tabs component declared by setting `data-awe-tabs` attribute on a div.
Each child div is a tab, `data-caption` is defined to set the tab button content.
We can define a custom tab button if we need to set html content for that button.
Tabs/Index.cshtml
<div data-awe-tabs>
    <div data-caption="tab1" class="expl">
        content for tab 1
    </div>
    <div>
        <button type="button" class="awe-tab-btn o-flex" style="align-items: center; gap: 5px;">
            <span>custom button <b>tab</b> </span>
            @MyAweIcons.LeafIco()
        </button>
        <div class="expl">
            content for custom button tab
        </div>
    </div>
    <div data-caption="tab 3" class="expl">
        @await Html.PartialAsync("Part1")
    </div>
</div>

Tabs autocollapse

Set width:

tab 1 content
tab 2 content
tab 3 content
tab 4 content
tab 5 content
tab 6 content
tab 7 content
tab 8 content
tab 9 content
tab 10 content
tab 11 content
tab 12 content
tab 13 content
tab 14 content
tab 15 content

Depending on available space, the tab header buttons can get hidden, and a DropDownList will appear instead where the hidden tabs can be selected.
Shared/Demos/TabsAutocollapse.cshtml
Set width:
@(Html.Awe().Switch(new SwitchOpt
{
    Name = "sizeToggle"
}))
<br />
<div id="tabsForSizeParent">
    <div class="tabs" data-awe-tabs>
        @foreach (int i in Enumerable.Range(1, 15))
        {
            <div data-caption="tab @i" class="expl"> tab @i content </div>
        }
    </div>
</div>
<br />
<script>
    // change tabs parent div width
    $(function(){
        $('#sizeToggle').on('change', function(){
            const val = $(this).val() === "true";
            const cont = $('#tabsForSizeParent');

            cont.css('width', '');
            if (val) {
                cont.width(300);
            }

            cont.trigger('resize');
        });
    });
</script>

Lazy loading tabs content

content for tab 1
Using a deferred component inside the tab content, this way when the tab content is visible the deferred will start to load.
Tabs/Index.cshtml
<div data-awe-tabs>
    <div data-caption="tab1" class="expl">
        content for tab 1
    </div>        
    <div data-caption="lazy content tab" class="expl">
        @(Html.Awe().DeferredLoad(new DeferredLoadOpt {                
            Url = Url.Action("Rend", "Data", new {index = 2})
        }))
    </div>
    <div data-caption="lazy content tab 2" class="expl">
        @(Html.Awe().DeferredLoad(new DeferredLoadOpt {                
            Url = Url.Action("Rend", "Data", new {index = 8})
        }))
    </div>
</div>



 Comments