Tabs
The Tabs component allows you to create a tabbed UI to navigate between pages or views. You can create tab items in the items array, or populate tab items from a dataSource.
Configure Overflow Behavior
The Tabs component stretches to fit its container if you do not specify the component's width. When the total tab width exceeds the component’s width, navigation buttons appear. A user can click these buttons to scroll through the tabs. Use the showNavButtons and scrollByContent properties to control this behavior.
Customize Tab Contents and Appearance
You can initialize a tab’s contents (text, icons and badges) with values from underlying data objects. This example demonstrates this technique. You can also specify an item template (itemTemplate) to customize tabs.
Process Tab Selection
Specify the selectedIndex property to select a specific tab. Use the onItemClick function to process clicks on tabs.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
import React from 'react';
import Tabs from 'devextreme-react/tabs';
import SelectBox from 'devextreme-react/select-box';
import { tabs, longtabs } from './data.js';
class App extends React.Component {
constructor() {
super();
this.state = {
selectedIndex: 0,
};
this.onValueChanged = this.onValueChanged.bind(this);
this.onTabsSelectionChanged = this.onTabsSelectionChanged.bind(this);
}
render() {
const { selectedIndex } = this.state;
return (
<React.Fragment>
<div id="longtabs">
<div className="caption">Tabs</div>
<Tabs dataSource={longtabs} />
</div>
<div id="scrolledtabs">
<div className="caption">Tabs with Overflow</div>
<Tabs
dataSource={longtabs}
width={300}
scrollByContent={true}
showNavButtons={true}
/>
</div>
<div id="tabs">
<div className="caption">API</div>
<Tabs
dataSource={tabs}
selectedIndex={selectedIndex}
onOptionChanged={this.onTabsSelectionChanged}
/>
<div className="content dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Selected index:</div>
<div className="dx-field-value">
<SelectBox
dataSource={tabs}
displayExpr="text"
valueExpr="id"
value={selectedIndex}
onValueChanged={this.onValueChanged}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Selected content:</div>
<div className="dx-field-value-static left-aligned">
{tabs[selectedIndex].content}
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
onTabsSelectionChanged(args) {
if (args.name === 'selectedIndex') {
this.setState({
selectedIndex: args.value,
});
}
}
onValueChanged(args) {
this.setState({
selectedIndex: args.value,
});
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.js");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
.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;
}
export const tabs = [
{
id: 0,
text: 'user',
icon: 'user',
content: 'User tab content',
},
{
id: 1,
text: 'comment',
icon: 'comment',
content: 'Comment tab content',
},
{
id: 2,
text: 'find',
icon: 'find',
content: 'Find tab content',
},
];
export const longtabs = [
{ text: 'user' },
{ text: 'analytics' },
{ text: 'customers' },
{ text: 'search' },
{ text: 'favorites' },
{ text: 'additional' },
{ text: 'clients' },
{ text: 'orders' },
{ text: 'shipment' },
];
window.config = {
transpiler: 'plugin-babel',
meta: {
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@22.2.6/cjs',
'devextreme-react': 'npm:devextreme-react@22.2.6',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.5.20/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.1.72/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.43/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);