DevExtreme React - Control the Behavior
An end user can switch the views by swiping them or selecting tabs. Note that tab navigation is always enabled, while swiping is active only on touch devices by default. To enable it on all types of devices, assign true to the swipeEnabled option. Otherwise, assign false.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { TabPanel } from 'devextreme-react/tab-panel';
- class App extends React.Component {
- render() {
- return (
- <TabPanel
- swipeEnabled={false}
- />
- );
- }
- }
- export default App;
You can switch the views progrmmatically using the selectedIndex or selectedItem option.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { TabPanel } from 'devextreme-react/tab-panel';
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- selectedIndex: 1
- }
- }
- handleOptionChange = (e) => {
- if(e.fullName === 'selectedIndex') {
- this.setState({
- selectedIndex: e.value
- });
- }
- }
- render() {
- return (
- <TabPanel
- selectedIndex={this.state.selectedIndex}
- onOptionChanged={this.handleOptionChange}
- />
- );
- }
- }
- export default App;
The TabPanel can loop the views, which enables an end user to swipe through the last view to the first and vice versa. Views are looped by default. To disable looping, assign false to the loop option.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { TabPanel } from 'devextreme-react/tab-panel';
- class App extends React.Component {
- render() {
- return (
- <TabPanel
- loop={false}
- />
- );
- }
- }
- export default App;
To specify whether or not to animate switching between views, use the animationEnabled option.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { TabPanel } from 'devextreme-react/tab-panel';
- class App extends React.Component {
- render() {
- return (
- <TabPanel
- animationEnabled={true}
- />
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.