Version: 2.0 |

TabControl

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders Bootstrap Navigation Tabs.

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
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
DataSource Object Gets or sets the source collection to data-bind the tab items.
attribute
inner element
static value
bindable
default
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
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
Items List<TabItem> Gets or sets the list of TabItem controls.
attribute
inner element
static value
bindable
default
ItemsLayout ItemsLayout Gets or sets layout of inner items.
attribute
inner element
static value
bindable
default
Default
VisualStyle NavigationBarVisualStyle Gets or sets the type of the navigation bar.
attribute
inner element
static value
bindable
default
Tabs

Events

Name Type Description
ActiveTabChanged Command Triggers a command in the viewmodel when an active tab changes.

Usage & Scenarios

Renders the Bootstrap Navigation Tabs widget.

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

HTML Rendered by the Control

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 IsActive property specifies whether the tab is currently selected or not.

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

<bs:TabControl>
  <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>

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.

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

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

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

The IsFilled property defines whether the navigation bar takes all available horizontal space.

The IsJustified property defines whether the navigation items should have equal width.

<bs:TabControl>
  <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>

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message