Edit on Github

TabControl

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders Bootstrap Navigation Tabs.

Usage & Scenarios

Renders the Bootstrap Navigation Tabs widget.

https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior

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 ActiveTabIndex 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>
    <ContentTemplate>
      <p>First tab</p>
    </ContentTemplate>
  </bs:TabItem>

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

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

Sample 2: ActiveTabIndex Property

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

Please note that the ActiveTabIndex takes precedence over the IsActive property of TabItem.

page.dothtml
ViewModel.cs

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

  <bs:TabItem>
    <HeaderTemplate>Tab 2</HeaderTemplate>
    <ContentTemplate>
      <p>Second tab</p>
    </ContentTemplate>
  </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 HeaderTemplate and ContentTemplate specify the templates for the generated tab items.

page.dothtml
ViewModel.cs

<bs:TabControl DataSource="{value: Tabs}">
  <HeaderTemplate>Tab {{value: Name}}</HeaderTemplate>
  <ContentTemplate>
    <p>{{value: Description}}</p>
    <dot:Button Click="{command: _parent.SelectTab(Id)}" Text="Select Tab" />
  </ContentTemplate>
</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 4: ActiveTabChanged Event

The ActiveTabChanged event is triggered when the user select another tab item.

page.dothtml
ViewModel.cs

<bs:TabControl ActiveTabChanged="{command: SelectedTabChanged()}">
    <bs:TabItem IsActive="true">
        <HeaderTemplate>Tab 1</HeaderTemplate>
        <ContentTemplate>
            <p>First tab</p>
        </ContentTemplate>
    </bs:TabItem>

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

{{value: NumberOfChanges}}

using System.Collections.Generic;
using System.Linq;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.TabControl.sample3
{
    public class ViewModel
    { 
        public int NumberOfChanges { get; set; } = 0;   
                 
        public void SelectedTabChanged()
        {
            NumberOfChanges++;
        }
    }
}

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>
    <ContentTemplate>
      <p>First tab</p>
    </ContentTemplate>
  </bs:TabItem>

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

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

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
ActiveTabIndex	Int32?	Gets or sets the index of the active tab.	attribute inner element static value bindable default	null
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
ContentTemplate	ITemplate	Gets or sets the template for contents of the generated items when using the DataSource property.	attribute inner element static value bindable default	null
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	Object	Gets or sets the source collection to data-bind the tab items.	attribute inner element static value bindable default	null
EnableAnimation	Boolean	Gets or sets whether the tab changes should use the fade animation.	attribute inner element static value bindable default	False
HeaderTemplate	ITemplate	Gets or sets the template for headers of the generated items when using the DataSource property.	attribute inner element static value bindable default	null
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
InnerText	String	Gets or sets the inner text of the HTML element. Note that this property can only be used on HtmlGenericControl directly and when the control does not have any children.	attribute inner element static value bindable default	null
IsEnabledBinding	IValueBinding	Gets or sets the property on the data-bound object which specifies whether the tab is enabled.	attribute inner element static value bindable default	null
Items	List<TabItem>	Gets or sets the list of TabItem controls.	attribute inner element static value bindable default	null
ItemsLayout	ItemsLayout	Gets or sets layout of inner items.	attribute inner element static value bindable default	Default
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