Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss
Your search did not match any results.
Box

Box

Documentation

The Box widget allows you to arrange various elements within it. Separate and adaptive, the Box widget acts as a building block for the layout. In this demo, you can see how the widget is used to layout different elements on a page.

Copy to CodeSandBox
Apply
Reset
import React from 'react'; import Box, { Item } from 'devextreme-react/box'; class App extends React.Component { render() { return ( <React.Fragment> <Box direction="row" width="100%" height={75}> <Item ratio={1}> <div className="rect demo-dark"> ratio = 1 </div> </Item> <Item ratio={2}> <div className="rect demo-light"> ratio = 2 </div> </Item> <Item ratio={1}> <div className="rect demo-dark"> ratio = 1 </div> </Item> </Box> <br /> <Box direction="row" width="100%" height={75}> <Item ratio={0} baseSize={150}> <div className="rect demo-dark"> 150px </div> </Item> <Item ratio={1}> <Box className="demo-light" direction="row" width="100%" height={75} align="center" crossAlign="center"> <Item ratio={0} baseSize={50}> <div className="small"></div> </Item> <Item ratio={0} baseSize={50}> <div className="small"></div> </Item> <Item ratio={0} baseSize={50}> <div className="small"></div> </Item> </Box> </Item> <Item ratio={0} baseSize="10%"> <div className="rect demo-dark"> 10% </div> </Item> </Box> <br /> <Box direction="col" width="100%" height={250}> <Item ratio={1}> <div className="rect demo-dark header"> Header </div> </Item> <Item ratio={2} baseSize={0}> <Box direction="row" width="100%" height={125}> <Item ratio={1}> <div className="rect demo-dark"> Left Bar </div> </Item> <Item ratio={1}> <div className="rect demo-light"> Content </div> </Item> <Item ratio={1}> <div className="rect demo-dark"> Right Bar </div> </Item> </Box> </Item> <Item ratio={1}> <div className="rect demo-dark footer"> Footer </div> </Item> </Box> </React.Fragment> ); } } 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/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.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>
.rect { text-align: center; font-size: 30px; padding-top: 10px; height: 100%; } .demo-light { background: rgba(245, 229, 166, 0.5) } .demo-dark { background: rgba(148, 215, 199, 0.5); } .demo-dark.header { background: rgba(243, 158, 108, 0.5); } .demo-dark.footer { background: rgba(123, 155, 207, 0.5); } .small { height: 50px; border: 1px solid lightgray; }
System.config({ transpiler: 'plugin-babel', meta: { }, paths: { 'npm:': 'https://unpkg.com/' }, defaultExtension: 'js', map: { 'react': 'npm:react@16.14.0/umd/react.development.js', 'react-dom': 'npm:react-dom@16.14.0/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.4', 'devextreme-react': 'npm:devextreme-react@20.2.4', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.7/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.5/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.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' }, 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' } }, babelOptions: { sourceMaps: false, stage0: true, react: true } });