Edit on Github

TabControl

in namespace DotVVM.Bootstrap5.Controls

Renders Bootstrap tab control.

Usage & Scenarios

Renders the Bootstrap Navigation Tabs widget.

https://getbootstrap.com/docs/5.2/components/navs-tabs

Sample 1: Basic TabControl

Each tab is represented by the TabItem control.

The header and content of each TabItem is defined using the HeaderTemplate and ContentTemplate properties.

The SelectedTabIndex property specifies a zero-based index of the tab that is currently selected.

A tab item can be disabled by setting its Enabled property to false.

<bs:TabControl>
  <bs:TabItem>
    <HeaderTemplate>Tab 1</HeaderTemplate>
      <p>First tab</p>
  </bs:TabItem>

  <bs:TabItem>
    <HeaderTemplate>Tab 2</HeaderTemplate>
      <p>Second tab</p>
  </bs:TabItem>

  <bs:TabItem Enabled="false">
    <HeaderTemplate>Tab 3</HeaderTemplate>
      <p>Third tab</p>
  </bs:TabItem>
</bs:TabControl>

Sample 2: SelectedTabIndex Property

The SelectedTabIndex property specifies a zero-based index of the tab which is currently selected.

Please note that the SelectedTabIndex takes precedence over the Selected property of TabItem.

<bs:TabControl SelectedTabIndex="{value: Index}">
  <bs:TabItem>
    <HeaderTemplate>Tab 1</HeaderTemplate>
      <p>First tab</p>
  </bs:TabItem>

  <bs:TabItem>
    <HeaderTemplate>Tab 2</HeaderTemplate>
      <p>Second tab</p>
  </bs:TabItem>
</bs:TabControl>
using System.Collections.Generic;
using System.Linq;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.TabControl.sample2
{
    public class ViewModel
    {
        public int Index { get; set; } = 1;
    }
}

Sample 3: Data-Binding Tab Items

To create tab items from a collection in the viewmodel, use the DataSource property bound to any IEnumerable collection in the viewmodel.

The ItemHeaderTemplate and ItemContentTemplate specify the templates for the generated tab items. To set a plain text for header and a TabItem content ItemContentText and ItemHeaderText properties could be used.

The ItemEnabled and ItemSelected allow to change the TabItem availability and selected state with data binging.

<bs:TabControl DataSource="{value: Tabs}">
  <HeaderTemplate>Tab {{value: Name}}</HeaderTemplate>
  <p>{{value: Description}}</p>
  <dot:Button Click="{command: _parent.SelectTab(Id)}" Text="Select Tab" />
</bs:TabControl>

<p>Selected Tab: {{value: Selected}}</p>

public class ViewModel
{
    public List<TabData> Tabs { get; set; }

    public string Selected { get; set; }


    public ViewModel()
    {
        Tabs = new List<TabData>()
        {
            new TabData() { Id = 1, Name = "Tab 1", Description = "Tab one" },
            new TabData() { Id = 2, Name = "Tab 2", Description = "Tab two" },
            new TabData() { Id = 3, Name = "Tab 3", Description = "Tab three"},
            new TabData() { Id = 4, Name = "Tab 4", Description = "Tab four" }
        };
    }

    public void SelectTab(int index)
    {
        var selectedTab = Tabs.Single(t => t.Id == index);
        Selected = selectedTab.Id + " - " + selectedTab.Name + " - " + selectedTab.Description;
    }

}

public class TabData
{
    
    public int Id { get; set; }

    public string Name { get; set; }

    public string Description { get; set; }

}

Sample 5: TabControl Appearance

The VisualStyle property specifies how the navigation bar should look like - Tabs, Pills and Simple.

<bs:TabControl VisualStyle="Pills">
  <bs:TabItem IsActive="true">
    <HeaderTemplate>Tab 1</HeaderTemplate>
      <p>First tab</p>
  </bs:TabItem>

  <bs:TabItem>
    <HeaderTemplate>Tab 2</HeaderTemplate>
      <p>Second tab</p>
  </bs:TabItem>

  <bs:TabItem Enabled="false">
    <HeaderTemplate>Tab 3</HeaderTemplate>
      <p>Third tab</p>
  </bs:TabItem>
</bs:TabControl>

Properties

Name Type Description Notes Default Value
property icon Animation TabControlAnimation Gets or sets whether the tab changes should use the fade animation.
attribute
inner element
static value
bindable
default
 Fade
property icon DataSource IValueBinding<IEnumerable<Object>> Gets or sets a data-source object from which the child controls will be generated.
attribute
inner element
static value
bindable
default
 null
property icon HorizontalAlignment TabControlBarHorizontalAlignment Gets or sets the alignment of the tabs.
attribute
inner element
static value
bindable
default
 Left
property icon ItemContentTemplate ITemplate Gets or sets a custom template for TabTtem content when DataSource is set.
attribute
inner element
static value
bindable
default
 null
property icon ItemContentText String Gets or sets a plain text for TabTtem content when DataSource is set.
attribute
inner element
static value
bindable
default
 null
property icon ItemEnabled Boolean Gets or sets whether the tab is enabled when DataSource is set.
attribute
inner element
static value
bindable
default
 True
property icon ItemHeaderTemplate ITemplate Gets or sets a custom template for TabItem header when DataSource is set.
attribute
inner element
static value
bindable
default
 null
property icon ItemHeaderText String Gets or sets a plain text for TabItem header when DataSource is set.
attribute
inner element
static value
bindable
default
 null
property icon Items List<ITabItem> Gets or sets the items inside the control.
attribute
inner element
static value
bindable
default
 null
property icon ItemSelected Boolean Gets or sets whether the tab is selected when DataSource is set.
attribute
inner element
static value
bindable
default
 null
property icon Justify Justify Gets or sets the justify behavior of the tabs. Fill makes items occupy all horizontal space, but not every nav item has the same width. Justify sets every nav item to the same width.
attribute
inner element
static value
bindable
default
 None
property icon SelectedTabIndex Int32 Gets or sets the index of the active tab.
attribute
inner element
static value
bindable
default
 null
property icon VerticalBreakPoint TabControlVerticalAlignment Gets or sets the breakpoint when TabControl changes to column layout.
attribute
inner element
static value
bindable
default
 null
property icon Visible Boolean Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.
attribute
inner element
static value
bindable
default
 True
property icon VisualStyle NavigationBarVisualStyle Gets or sets the type of the navigation bar.
attribute
inner element
static value
bindable
default
 Tabs

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization