<div class="tabs-demo">
<div class="widget-container">
<div class="widget-wrapper widget-wrapper-horizontal">
@(Html.DevExtreme().Tabs()
.ID("withText")
.Width("auto")
.SelectedIndex(0)
.DataSource(new JS("tabsText"))
.StylingMode(TabsStyle.Secondary)
.IconPosition(TabsIconPosition.Top)
)
@(Html.DevExtreme().Tabs()
.ID("withIconAndText")
.Width("auto")
.SelectedIndex(0)
.DataSource(new JS("tabsTextAndIcon"))
.StylingMode(TabsStyle.Secondary)
.IconPosition(TabsIconPosition.Top)
)
@(Html.DevExtreme().Tabs()
.ID("withIcon")
.Width("auto")
.SelectedIndex(0)
.DataSource(new JS("tabsIcon"))
.StylingMode(TabsStyle.Secondary)
.IconPosition(TabsIconPosition.Top)
)
</div>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div>Orientation</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "horizontal", "vertical" })
.InputAttr("aria-label", "Orientation")
.Value("horizontal")
.OnValueChanged("orientation_valueChanged")
)
</div>
<div class="option">
<div>Styling Mode</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "primary", "secondary" })
.InputAttr("aria-label", "Styling Mode")
.Value("secondary")
.OnValueChanged("stylingMode_valueChanged")
)
</div>
<div class="option">
<div>Icon position</div>
@(Html.DevExtreme().SelectBox()
.DataSource(new[] { "top", "start", "end", "bottom" })
.InputAttr("aria-label", "Icon Position")
.Value("top")
.OnValueChanged("iconPosition_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("show-navigation-buttons")
.Value(false)
.Text("Show Navigation Buttons")
.OnValueChanged("showNavigation_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("scroll-content")
.Value(false)
.Text("Scroll Content")
.OnValueChanged("scrollContent_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Full width")
.OnValueChanged("fullWidth_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.Value(false)
.Text("Right-to-left mode")
.OnValueChanged("rtlEnabled_valueChanged")
)
</div>
</div>
</div>
<script>
function orientation_valueChanged(e) {
const $widgetWrapper = $(".widget-wrapper");
const isVertical = e.value === "vertical";
$widgetWrapper.toggleClass("widget-wrapper-vertical", isVertical);
$widgetWrapper.toggleClass("widget-wrapper-horizontal", !isVertical);
setTabsOption("orientation", e.value);
}
function stylingMode_valueChanged(e) {
setTabsOption("stylingMode", e.value);
}
function iconPosition_valueChanged(e) {
setTabsOption("iconPosition", e.value);
}
function showNavigation_valueChanged(e) {
const scrollContentCheckBox = $("#scroll-content").dxCheckBox("instance");
const shouldRestrictWidth = data.value || scrollContentCheckBox.option("value");
toggleStrictWidthClass(shouldRestrictWidth);
setTabsOption("showNavButtons", e.value);
}
function scrollContent_valueChanged(e) {
const showNavButtonsCheckBox = $("#show-navigation-buttons").dxCheckBox("instance");
const shouldRestrictWidth = data.value || showNavButtonsCheckBox.option("value");
toggleStrictWidthClass(shouldRestrictWidth);
setTabsOption("scrollByContent", e.value);
}
function fullWidth_valueChanged(e) {
setTabsOption("width", e.value ? "100%" : "auto");
}
function rtlEnabled_valueChanged(e) {
setTabsOption("rtlEnabled", e.value);
}
function setTabsOption(option, value) {
$("#withText").dxTabs("instance").option(option, value);
$("#withIconAndText").dxTabs("instance").option(option, value);
$("#withIcon").dxTabs("instance").option(option, value);
}
function toggleStrictWidthClass(shouldRestrictWidth) {
const $widgetWrapper = $(".widget-wrapper");
$widgetWrapper.toggleClass("strict-width", isHorizontal && shouldRestrictWidth);
}
const tabsText = [
{
id: 0,
text: "User",
},
{
id: 1,
text: "Analytics",
},
{
id: 2,
text: "Clients",
},
{
id: 3,
text: "Orders",
},
{
id: 4,
text: "Favorites",
},
{
id: 5,
text: "Search",
},
];
const tabsTextAndIcon = [
{
id: 0,
text: "User",
icon: "user",
},
{
id: 1,
text: "Analytics",
icon: "chart",
},
{
id: 2,
text: "Clients",
icon: "accountbox",
},
{
id: 3,
text: "Orders",
icon: "ordersbox",
},
{
id: 4,
text: "Favorites",
icon: "bookmark",
},
{
id: 5,
text: "Search",
icon: "search",
},
];
const tabsIcon = [
{
id: 0,
icon: "user",
},
{
id: 1,
icon: "chart",
},
{
id: 2,
icon: "accountbox",
},
{
id: 3,
icon: "ordersbox",
},
{
id: 4,
icon: "bookmark",
},
{
id: 5,
icon: "search",
},
];
</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();
}
}
}
.tabs-demo {
display: flex;
}
.strict-width {
max-width: 340px;
}
.dx-theme-generic .strict-width {
max-width: 250px;
}
.widget-container {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
width: 100%;
min-width: 200px;
padding: 16px 32px;
overflow: clip;
}
.widget-wrapper {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 80px;
width: 100%;
}
.widget-wrapper-vertical {
width: 100%;
flex-direction: row;
align-items: center;
}
.options {
display: flex;
flex-direction: column;
flex-shrink: 0;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
}
.caption {
font-weight: 500;
font-size: 18px;
}
#show-navigation-buttons {
margin-top: 22px;
}
.option {
margin-top: 20px;
}
.dx-tabs {
max-width: 100%;
}
.dx-tabs-vertical {
height: 216px;
}
.dx-viewport:not(.dx-theme-generic) .dx-tabs-horizontal {
border-block-end: 1px solid rgb(225, 225, 225, 0.4);
}
.dx-viewport:not(.dx-theme-generic) .dx-tabs-vertical {
height: 232px;
border-inline-end: 1px solid rgb(225, 225, 225, 0.4);
}