Your search did not match any results.
Multi View

Multi View

Documentation

The MultiView widget contains several views and allows an end user to switch between them. In this demo, all views are defined using a custom template. You can navigate through the views by swiping them in the horizontal direction.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import CheckBox from 'devextreme-react/check-box'; import MultiView from 'devextreme-react/multi-view'; import { multiViewItems as companies } from './data.js'; import CompanyItem from './CompanyItem.js'; class App extends React.Component { constructor() { super(); this.state = { animationEnabled: true, loop: false, selectedIndex: 0 }; this.onSelectionChanged = this.onSelectionChanged.bind(this); this.onLoopChanged = this.onLoopChanged.bind(this); this.onAnimationEnabledChanged = this.onAnimationEnabledChanged.bind(this); } onSelectionChanged(args) { if(args.name == 'selectedIndex') { this.setState({ selectedIndex: args.value }); } } onLoopChanged(args) { this.setState({ loop: args.value }); } onAnimationEnabledChanged(args) { this.setState({ animationEnabled: args.value }); } render() { return ( <div id={'multiview'}> <div> Item <span>{ this.state.selectedIndex + 1 }</span> of <span>{ companies.length }</span> </div> <MultiView height={300} dataSource={companies} selectedIndex={this.state.selectedIndex} onOptionChanged={this.onSelectionChanged} loop={this.state.loop} itemComponent={CompanyItem} animationEnabled={this.state.animationEnabled} /> <div className={'options'}> <div className={'caption'}>Options</div> <div className={'option'}> <CheckBox value={ this.state.loop } onValueChanged={this.onLoopChanged} text={'Loop enabled'} /> </div> <div className={'option'}> <CheckBox value={ this.state.animationEnabled } onValueChanged={this.onAnimationEnabledChanged} text={'Animation enabled'} /> </div> </div> </div> ); } } export default App;
import React from 'react'; class CompanyItem extends React.PureComponent { render() { const company = this.props.data; return ( <div> <div className={'multiview-item'}> <h1>{ company.CompanyName }</h1> <div> <p> <b>{ company.City } </b> (<span>{ company.State }</span>) </p> <p> <span>{ company.Zipcode } </span> <span>{ company.Address }</span> </p> </div> <div> <p> Phone: <b>{ company.Phone }</b> </p> <p> Fax: <b>{ company.Fax }</b> </p> <p> Website: <a href={company.Website} target={'_blank'}> { company.Website } </a> </p> </div> </div> </div> ); } } export default CompanyItem;
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/19.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.4.1/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>
#multiview { margin-top: 25px; } .multiview-item { margin:25px; user-select: none; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; padding: 20px 0 30px; } .multiview-item > div { padding-top: 20px; } #multiview > div:first-child { padding-left: 25px; } #multiview p, #multiview h1 { margin: 0; } #multiview h1 { font-size: 34px; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }
export const multiViewItems = [{ 'ID': 1, 'CompanyName': 'SuprMart', 'Address': '702 SW 8th Street', 'City': 'Bentonville', 'State': 'Arkansas', 'Zipcode': 72716, 'Phone': '(800) 555-2797', 'Fax': '(800) 555-2171', 'Website': 'http://www.nowebsitesupermart.com' }, { 'ID': 2, 'CompanyName': "El'Depot", 'Address': '2455 Paces Ferry Road NW', 'City': 'Atlanta', 'State': 'Georgia', 'Zipcode': 30339, 'Phone': '(800) 595-3232', 'Fax': '(800) 595-3231', 'Website': 'http://www.nowebsitedepot.com' }, { 'ID': 3, 'CompanyName': 'K&S Music', 'Address': '1000 Nicllet Mall', 'City': 'Minneapolis', 'State': 'Minnesota', 'Zipcode': 55403, 'Phone': '(612) 304-6073', 'Fax': '(612) 304-6074', 'Website': 'http://www.nowebsitemusic.com' }, { 'ID': 4, 'CompanyName': 'Tom Club', 'Address': '999 Lake Drive', 'City': 'Issaquah', 'State': 'Washington', 'Zipcode': 98027, 'Phone': '(800) 955-2292', 'Fax': '(800) 955-2293', 'Website': 'http://www.nowebsitetomsclub.com' }];
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16/umd/react.development.js', 'react-dom': 'npm:react-dom@16/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-react': 'npm:devextreme-react@19.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });