Documentation
The Tabs is a tab strip used to switch between pages or views.
@{
var longTabs = new[] {
"user" , "analytics", "customers", "search", "favorites", "additional", "clients", "orders", "shipment"
};
var tabs = new[] {
new { id = 0, text = "user", icon = "user", content = "User tab content" },
new { id = 1, text = "comment", icon = "comment", content = "Comment tab content" },
new { id = 2, text = "find", icon = "find", content = "Find tab content" }
};
}
<div id="longtabs">
<div class="caption">Tabs</div>
@(Html.DevExtreme().Tabs()
.DataSource(longTabs)
)
</div>
<div id="scrolledtabs">
<div class="caption">Tabs with Overflow</div>
@(Html.DevExtreme().Tabs()
.DataSource(longTabs)
.Width(300)
.ScrollByContent(true)
.ShowNavButtons(true)
)
</div>
<div id="tabs">
<div class="caption">API</div>
@(Html.DevExtreme().Tabs()
.ID("tabs-container")
.DataSource(tabs)
.SelectedIndex(0)
.OnItemClick("tabs_itemClick")
)
<div class="content dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Selected index:</div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.ID("selectbox")
.DataSource(tabs)
.Value(0)
.DisplayExpr("text")
.ValueExpr("id")
.OnValueChanged("selectBox_valueChanged")
)
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Selected content:</div>
<div class="dx-field-value-static left-aligned">
User tab content
<div>
</div>
</div>
</div>
</div>
</div>
<script>
function tabs_itemClick(e) {
var selectBox = $("#selectbox").dxSelectBox("instance");
selectBox.option("value", e.itemData.id);
}
function selectBox_valueChanged(e) {
var tabsInstance = $("#tabs-container").dxTabs("instance");
var tabs = tabsInstance.getDataSource().items();
tabsInstance.option("selectedIndex", e.value);
$(".left-aligned").text(tabs[e.value].content);
}
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TabsController : Controller {
public ActionResult Overview() {
return View();
}
}
}
.content{
text-align: justify;
margin-top: 25px;
}
#longtabs{
margin-top: 20px;
}
#scrolledtabs {
margin-top: 20px;
}
#tabs {
margin-top: 60px;
}
.caption{
font-size: 16px;
padding-bottom: 3px;
padding-left: 10px;
}
.left-aligned {
text-align: left;
}