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.

page.dothtml

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

page.dothtml
ViewModel.cs

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

page.dothtml
ViewModel.cs

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

page.dothtml

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

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
Animation	TabControlAnimation	Gets or sets whether the tab changes should use the fade animation.	attribute inner element static value bindable default	Fade
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
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
HorizontalAlignment	TabControlBarHorizontalAlignment	Gets or sets the alignment of the tabs.	attribute inner element static value bindable default	Left
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
ItemContentTemplate	ITemplate	Gets or sets a custom template for TabTtem content when DataSource is set.	attribute inner element static value bindable default	null
ItemContentText	String	Gets or sets a plain text for TabTtem content when DataSource is set.	attribute inner element static value bindable default	null
ItemEnabled	Boolean	Gets or sets whether the tab is enabled when DataSource is set.	attribute inner element static value bindable default	True
ItemHeaderTemplate	ITemplate	Gets or sets a custom template for TabItem header when DataSource is set.	attribute inner element static value bindable default	null
ItemHeaderText	String	Gets or sets a plain text for TabItem header when DataSource is set.	attribute inner element static value bindable default	null
Items	List<ITabItem>	Gets or sets the items inside the control.	attribute inner element static value bindable default	null
ItemSelected	Boolean	Gets or sets whether the tab is selected when DataSource is set.	attribute inner element static value bindable default	null
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
SelectedTabIndex	Int32	Gets or sets the index of the active tab.	attribute inner element static value bindable default	null
VerticalBreakPoint	TabControlVerticalAlignment	Gets or sets the breakpoint when TabControl changes to column layout.	attribute inner element static value bindable default	null
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
VisualStyle	NavigationBarVisualStyle	Gets or sets the type of the navigation bar.	attribute inner element static value bindable default	Tabs