-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Tab Panel - Overview
The TabPanel UI component includes both the Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view (and vice versa).
To get started with the DevExtreme TabPanel component, refer to the following step-by-step tutorial: Getting Started with TabPanel.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
@{
var tabsPositions = new[] {
"left",
"top",
"right",
"bottom"
};
var stylingModes = new[] {
"secondary",
"primary"
};
var iconPositions = new[] {
"top",
"start",
"end",
"bottom"
};
}
<div class="tabpanel-demo">
<div class="widget-container">
@(Html.DevExtreme().TabPanel()
.ID("tabpanel")
.DataSource(d => d.Mvc().LoadAction("GetTabPanelItems"))
.Width("100%")
.Height(418)
.AnimationEnabled(true)
.SwipeEnabled(true)
.TabsPosition(Position.Left)
.StylingMode(TabsStyle.Secondary)
.IconPosition(TabsIconPosition.Top)
.ItemTemplate(new JS("tabPanelTemplate"))
)
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<div class="option-label">Tab position</div>
@(Html.DevExtreme().SelectBox()
.DataSource(tabsPositions)
.Value("left")
.InputAttr("aria-label", "Tab position")
.OnValueChanged("tabsPositionChanged")
)
</div>
<div class="option">
<div class="option-label">Styling mode</div>
@(Html.DevExtreme().SelectBox()
.DataSource(stylingModes)
.Value("secondary")
.InputAttr("aria-label", "Styling mode")
.OnValueChanged("stylingModeChanged")
)
</div>
<div class="option">
<div class="option-label">Icon position</div>
@(Html.DevExtreme().SelectBox()
.DataSource(iconPositions)
.Value("top")
.InputAttr("aria-label", "Icon positions")
.OnValueChanged("iconPositionChanged")
)
</div>
</div>
</div>
<script>
const taskItem = (task) => {
const className = `task-item task-item-priority-${task.priority}`;
return `
<div class="${className}">
<span class="task-item-text">
${task.text}
</span>
<span class="task-item-info">
${task.date} by ${task.assignedBy}
</span>
<i class="task-item-pseudo-button dx-icon dx-icon-overflow"></i>
</div>
`;
};
const taskList = (tasks) => {
const list = tasks.reduce((accumulator, task) => `${accumulator} ${taskItem(task)}`, '');
return `
<div class="tabpanel-item">
${list}
</div>
`;
};
function tabPanelTemplate({ tasks }) {
return taskList(tasks)
}
function getTabPanelInstance() {
return $("#tabpanel").dxTabPanel("instance");
}
function tabsPositionChanged({ value }) {
getTabPanelInstance().option({ tabsPosition: value });
}
function stylingModeChanged({ value }) {
getTabPanelInstance().option({ stylingMode: value });
}
function iconPositionChanged({ value }) {
getTabPanelInstance().option({ iconPosition: value });
}
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
Generate Similar Tabs Based on a Data Source
To generate similar tabs and views, bind the TabPanel to data (using the items or dataSource property). Both these properties can work with local arrays, but dataSource also accepts a DataSource object. You can use this object if you need to process the local array or fetch the array from a remote data source. In this demo, the dataSource property is set to a local array.
Each object in the items[] or dataSource array can contain predefined fields, such as title or icon (see the items[] section for the full list). The TabPanel automatically recognizes these fields and creates the default tab and view appearance based on them.
Customize Tab Contents and Appearance
You can initialize tab contents (text, icons and badges) with values from underlying data objects.
Use the drop-down editors on the right to change tab position, styling mode, and icon position.