Default Tab Control

The Tab Control provides a visual interface for creating custom tabbed layouts. The Tab Control provides only navigation means and requires manually updating specific content to reflect a selected tab's changes.

Tab Control's methods:

Client Tab Control's events:

Tab's methods:

@(Html.DevExpress()
    .BootstrapTabControl("TabControlDefault")
    .Tabs(tabs=> {
        tabs.Add().Text("Home");
        tabs.Add().Text("Products");
        tabs.Add().Text("Support");
    }))

Tab Alignment

Use the TabAlign method to specify the alignment of tabs within the control. The following modes are supported: Justify, Left, Right.

@(Html.DevExpress()
    .BootstrapTabControl("TabControlAlignment")
    .TabAlign(TabAlign.Justify)
    .Tabs(tabs => {
        ...
    }))

Badges

The Tab Control can display supplementary information for any tab within a badge. A badge can display a text, an icon or both. Use the following API to set the contents of item badges:

The methods listed below allow you to manipulate badges on the client:

Note that the Badge method does not affect templated tabs.

@(Html.DevExpress()
    .BootstrapTabControl("BadgesTabControl")
    .Tabs(tabs => {
        ...
        tabs.Add()
            .Text("Messages")
            .Badge(badge => badge.Text("1"));
    })
)
function onTabWithBadgeClick(s, e) {
    if (e.tab.GetBadgeText())
        e.tab.SetBadgeText("");
}

Templates

The Tab Control supports templates allowing you to customize control appearance and layout. A template can be applied to all tabs (using control level templates) or a specific tab (using item level templates). Moreover, templates can be specified for tabs in both active and inactive states. Use the following methods to specify templates.

Tab Control methods:

Tab methods:

@(Html.DevExpress()
    .BootstrapTabControl("TemplatesTabControl")
    .Tabs(tabs => {
        ...
        tabs.Add()
            .Name("Messages")
            .Text("Messages")
            .ActiveTabTemplate(t => @<text>
                    <div class="dropdown">
                        <a href="javascript:;" class="nav-link active dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@t.Tab.Text</a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:;">Inbox</a>
                            <a class="dropdown-item" href="javascript:;">Sent Items</a>
                            <a class="dropdown-item" href="javascript:;">Drafts</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="javascript:;">Spam</a>
                        </div>
                    </div>
                </text>)
            .TabIconCssClass("dropdown-toggle float-right");
    })
    .ClientSideEvents(events => {
         events.TabClick("onDropdownTabClick");
    })
    
)
function onDropdownTabClick(s, e) {
            if(e.tab.name == "Messages" && s.GetActiveTab() != e.tab) {
                $(".nav-link.dropdown-toggle").dropdown("toggle");
                e.htmlEvent.stopPropagation();
            }
        }

Client-Side Events

This demo illustrates the capabilities of the Tab Control's client events and allows you to specify which client-side events you want to track.

The tab.name property of the event handler's parameter allows you to identify the tab for which an event has been raised.

Interact with a Tab control interface below to see the information about all tracked events raised in response to your actions in the event log.

Trace Events:
<script type="text/javascript">
    function onInit(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'Init');
    }
    function onTabClick(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'TabClick');
    }
    function onActiveTabChanging(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanging');
    }
    function onActiveTabChanged(s, e) {
        dxbsDemo.eventMonitor.trace(s, e, 'ActiveTabChanged');
    }
</script>
@(Html.DevExpress()
    .BootstrapTabControl("ClientSideEventsTabControl")
    .Tabs(tabs => {
        ...
     }))

Client-Side Functionality

The Tab Control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI method specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName method has been called or any client-side event available through the ClientSideEvents method is handled.

This demo allows you to interactively explore capabilities of the Tab Control's client-side API.

BootstrapClientTabControl methods:

BootstrapClientTab methods:

@(Html.DevExpress()
    .BootstrapTabControl("tabControl")
    .EnableClientSideAPI(true)
    ...
)
Screen Size
Color Themes
Demo QR Code