React MultiView - Switch Between Views
By default, an end user can switch between views by swiping. Assign false to the swipeEnabled property to disable this feature.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { MultiView } from 'devextreme-react/multi-view';
- class App extends React.Component {
- render() {
- return (
- <MultiView
- swipeEnabled={false}
- />
- );
- }
- }
- export default App;
You can switch the views from code by changing the selectedIndex or selectedItem property.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { MultiView } from 'devextreme-react/multi-view';
- const multiViewItems = [
- { text: 'Personal Data' },
- { text: 'Contacts' }
- ];
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- selectedIndex: 1
- }
- }
- handleOptionChange = (e) => {
- if(e.fullName === 'selectedIndex') {
- this.changeSelectedIndex(e.value);
- }
- }
- changeSelectedIndex = (itemIndex) => {
- this.setState({
- selectedIndex: itemIndex
- });
- }
- render() {
- return (
- <MultiView
- dataSource={multiViewItems}
- selectedIndex={this.state.selectedIndex}
- onOptionChanged={this.handleOptionChange}
- />
- );
- }
- }
- export default App;
By default, the MultiView UI component animates switching between views. You can disable animation by setting the animationEnabled property to false.
App.js
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { MultiView } from 'devextreme-react/multi-view';
- class App extends React.Component {
- render() {
- return (
- <MultiView
- animationEnabled={false}
- />
- );
- }
- }
- export default App;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.