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 => {
        tabs.Add().Text("Home");
        tabs.Add().Text("Products");
        tabs.Add().Text("Support");
    }))

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("Home");
        tabs.Add().Text("Profile");
        tabs.Add()
            .Text("Messages")
            .Badge(badge => badge.Text("1"));
    })
)
function onTabWithBadgeClick(args) {
    if (args.tab.getBadgeText())
        args.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().Text("Home");
        tabs.Add().Text("Profile");
        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(args) {
    if(args.tab.name === "Messages" && this.getActiveTab().instance !== args.tab) {
        $(".nav-link.dropdown-toggle").dropdown("toggle");
        args.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(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'Init');
    }
    function onTabClick(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'TabClick');
    }
    function onActiveTabChanging(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ActiveTabChanging');
    }
    function onActiveTabChanged(args) {
        dxbsDemo.eventMonitor.trace(this, args, 'ActiveTabChanged');
    }
</script>
@(Html.DevExpress()
    .BootstrapTabControl("clientSideEventsTabControl")
    .Tabs(tabs => {
        tabs.Add().Text("Home");
        tabs.Add().Text("Products");
        tabs.Add().Text("Support");
    })
     .ClientSideEvents(events => {
         events.Init("onInit");
         events.TabClick("onTabClick");
         events.ActiveTabChanging("onActiveTabChanging");
         events.ActiveTabChanged("onActiveTabChanged");
     }))

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 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.

BootstrapTabControl methods:

BootstrapTab methods:

@(Html.DevExpress()
    .BootstrapTabControl("tabControl")
    .EnableClientSideAPI(true)
    .Tabs(tabs => {
        tabs.Add()
            .Text("Tab 1")
            .ActiveTabIconCssClass("fa fa-check");
        tabs.Add()
            .Text("Tab 2")
            .ActiveTabIconCssClass("fa fa-check");
        tabs.Add()
            .Text("Tab 3")
            .ActiveTabIconCssClass("fa fa-check");
    })
)
Screen Size
Color Themes
Demo QR Code