DevExtreme jQuery - Overview
The Tabs is a tab strip used to switch between pages or views. This widget is included in the TabPanel widget, but you can use the Tabs separately as well.
The following code adds the Tabs widget to your page. One of the tabs has an icon, another has a badge.
jQuery
JavaScript
$(function() {
$("#tabsContainer").dxTabs({
items: [
{ text: "User", icon: 'user' },
{ text: "Comment", badge: "New" },
{ text: "Find" }
]
});
});Angular
HTML
TypeScript
<dx-tabs
[items]="tabs">
</dx-tabs>
import { DxTabsModule } from "devextreme-angular";
// ...
export class AppComponent {
tabs = [
{ text: "User", icon: 'user' },
{ text: "Comment", badge: "New" },
{ text: "Find" }
];
}
@NgModule({
imports: [
// ...
DxTabsModule
],
// ...
})Vue
App.vue
<template>
<DxTabs
:items="tabs" />
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxTabs from "devextreme-vue/tabs";
export default {
components: {
DxTabs
},
data() {
return {
tabs: [
{ text: "User", icon: 'user' },
{ text: "Comment", badge: "New" },
{ text: "Find" }
]
};
}
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import { Tabs } from 'devextreme-react/tabs';
const tabs = [
{ text: "User", icon: 'user' },
{ text: "Comment", badge: "New" },
{ text: "Find" }
];
class App extends React.Component {
render() {
return (
<Tabs
items={tabs}
/>
);
}
}
export default App;Note that field names in these data source items are conventional. This provides a default appearance for tabs, which can be customized later.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Tabs - Customize Item Appearance
- Tabs - Control the Behavior
- Tabs - Keyboard Support
- Tabs API Reference
Feedback