TabControl
in namespace DotVVM.BusinessPack.Controls
Renders a collection of tabs with specific contents.
Usage & Scenarios
Renders a container with tabs that are defined in the markup, or generated from a collection in the viewmodel.
Sample 1: Basic Usage
The tabs can be defined inside the <bp:TabControl>
individually. Each tab can have a different content in this case.
Alternatively, the tabs can be generated using the DataSource
property bound to a collection in the viewmodel. In this case, the TabHeaderTemplate
and TabContentTemplate
properties are used to specify the header and content of the tabs.
If the tab header contains only a text value, you can use the HeaderText
property instead of the HeaderTemplate
.
<%-- Hardcoded tabs --%>
<bp:TabControl>
<bp:TabItem HeaderText="Tab 1">
<ContentTemplate>
<p>Tab 1 description</p>
</ContentTemplate>
</bp:TabItem>
<bp:TabItem>
<HeaderTemplate>
<i>Tab 2</i>
</HeaderTemplate>
<ContentTemplate>
<p>Tab 2 description</p>
</ContentTemplate>
</bp:TabItem>
</bp:TabControl>
<%-- Templated tabs --%>
<bp:TabControl DataSource="{value: Countries}"
TabIsActiveBinding="{value: IsSelected}"
TabKeyBinding="{value: Id}">
<TabHeaderTemplate>
{{value: Name}}
</TabHeaderTemplate>
<TabContentTemplate>
<ul>
<dot:Repeater DataSource="{value: Cities}">
<ItemTemplate>
<li>{{value: _this}}</li>
</ItemTemplate>
</dot:Repeater>
</ul>
</TabContentTemplate>
</bp:TabControl>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
public class ViewModel : DotvvmViewModelBase
{
public List<Country> Countries { get; set; } = new List<Country> {
new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } },
new Country { Id = 3, Name = "United States", Cities = new List<string> { "Washington", "New York" } }
};
}
}
using System.Collections.Generic;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
public List<string> Cities { get; set; } = new List<string>();
public bool IsSelected { get; set; }
}
}
Sample 2: Tab Key
The ActiveTabKey
property specifies a key of the tab which is currently selected. The key of a tab is automatically generated by default. But you can override it by setting the Key
property. The data-binding works in both ways, so it is possible to switch the tabs by changing the viewmodel property bound to ActiveTabKey
.
The ActiveTabChanged
event specifies a command in the viewmodel which is triggered when the user switches the tab.
<bp:TabControl ActiveTabKey="{value: ActiveTabKey}"
ActiveTabChanged="{command: TabChanged()}">
<bp:TabItem HeaderText="Tab 1">
<ContentTemplate>
<p>Tab 1 description</p>
<bp:Button Text="Go to Tab 2"
Click="{command: ActiveTabKey = "Other"}" />
</ContentTemplate>
</bp:TabItem>
<bp:TabItem Key="Other" HeaderText="Tab 2">
<ContentTemplate>
<p>Tab 2 description</p>
<bp:Button Text="Go to Tab 1"
Click="{command: ActiveTabKey = "Tab 1"}" />
</ContentTemplate>
</bp:TabItem>
</bp:TabControl>
<p>Active tab has changed {{value: ChangeCount}} times.</p>
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public int ChangeCount { get; set; }
public string ActiveTabKey { get; set; } = "Other";
public void TabChanged()
{
ChangeCount++;
}
}
}
Sample 3: Alternative Tab Switching
If you don't want to use the ActiveTabKey
property to identify the tab which is selected, there is an alternative way.
In the data-bound tabs mode, you can use the TabIsActiveBinding
property. This property is bound to a bool
property in each of the DataSource
collection items, and it will keep track of whether the tab is selected or not.
<bp:TabControl DataSource="{value: Countries}"
TabIsActiveBinding="{value: IsSelected}"
TabHeaderTextBinding="{value: Name}"
TabKeyBinding="{value: Id}">
<TabContentTemplate>
<ul>
<dot:Repeater DataSource="{value: Cities}">
<ItemTemplate>
<li>{{value: _this}}</li>
</ItemTemplate>
</dot:Repeater>
</ul>
</TabContentTemplate>
</bp:TabControl>
<br />
<dot:Repeater DataSource="{value: Countries}">
<ItemTemplate>
{{value: Name}} Tab {{value: IsSelected ? "is" : "is not"}} selected.
<br />
</ItemTemplate>
</dot:Repeater>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
public class ViewModel : DotvvmViewModelBase
{
public List<Country> Countries { get; set; } = new List<Country> {
new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } }
};
}
}
using System.Collections.Generic;
namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
public class Country
{
public int Id { get; set; }
public string Name { get; set; }
public List<string> Cities { get; set; } = new List<string>();
public bool IsEnabled { get; set; } = true;
public bool IsSelected { get; set; }
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
ActiveTabKey | Object | Gets or sets the key of a tab that is currently active. |
attribute
bindable
|
null | |
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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. |
attribute
static value
bindable
|
null | |
DataSource | IEnumerable |
attribute
bindable
|
null | ||
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
TabContentTemplate | ITemplate | Gets or sets the template rendering contents of tabs. This property is used when tabs are loaded from the DataSource property. |
inner element
static value
bindable
|
null | |
TabEnabledBinding | IValueBinding<Boolean?> | Gets or sets the binding which retrieves whether a tab from DataSource is enabled and can be activated. |
attribute
static value
bindable
|
null | |
TabHeaderTemplate | ITemplate | Gets or sets the template for headers of tabs. This property is used when tabs are loaded from the DataSource property. |
inner element
static value
bindable
|
null | |
TabHeaderTextBinding | IValueBinding<String> | Gets or sets the binding which retrieves the text of the header a tab from DataSource. |
attribute
static value
bindable
|
null | |
TabIsActiveBinding | IValueBinding<Boolean?> | Gets or sets the binding which determines whether a tab from DataSource is active or not. Only one tab can be active at the same time. |
attribute
static value
bindable
|
null | |
TabKeyBinding | IValueBinding | Gets or sets the binding which retrieves the unique key of a tab from DataSource. |
attribute
static value
bindable
|
null | |
Tabs | List<TabItem> | Gets or sets a collection of tabs rendered inside. |
inner element
static value
bindable
default
|
null | |
TabVisibleBinding | IValueBinding<Boolean?> | Gets or sets the binding which retrieves whether a tab from DataSource is visible. |
attribute
static value
bindable
|
null | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
ActiveTabChanged | Command | Gets or sets the command that will be triggered when the active tab is changed. |