选项卡导航主要用于企业页面显示不同子栏目或者页面的信息内容。
* * * * *
* 实现一个选项卡导航：
~~~
@using EasyMvc.EasyMvcControl
@{
var data = new List<TabItem>()
{
new TabItem() {Title = "我是Tab 1", Text = "我是Tab 1的内容"},
new TabItem() {Title = "控件说明", Text = "控件的Text一般可以简单嵌入html"}
};
}
@Html.Q().Tab().SourceItems(data)
~~~
效果如下：
* 实现不同风格选项卡导航：
~~~
@using EasyMvc.EasyMvcControl
@{
var data = new List<TabItem>()
{
new TabItem() {Title = "我是Tab 1", Text = "我是Tab 1的内容"},
new TabItem() {Title = "控件说明", Text = "控件的Text一般可以简单嵌入html"}
};
}
@Html.Q().Tab().SourceItems(data)
@Html.Q().Tab().SourceItems(data).AsSimpleTab()
@Html.Q().Tab().SourceItems(data).AsCardTab()
~~~
效果如下：
扩展：
|服务端方法名 |说明 |
| --- | --- |
|AsSimpleTab() |转化为简单风格的选项卡 |
|AsCardTab() |转化为带灰色背景的选项卡 |
