Your search did not match any results.
Tabs

Overview

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 DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.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; }