React Box - Nest One Box Into Another
A nested Box is configured similarly to an ordinary Box. To nest one Box into another, add one more item to the parent Box and put the markup of the nested Box into this item.
App.js
CSS
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import Box, { Item } from 'devextreme-react/box';
- class App extends React.Component {
- render() {
- return (
- <Box id="parentBox"
- direction="col"
- height="100%"
- width={300}>
- <Item baseSize={50} ratio={1}>
- <div className="box-item yellow"> Item 1 </div>
- </Item>
- <Item baseSize={50} ratio={1}>
- <Box id="nestedBox"
- direction="row"
- height="100%">
- <Item ratio={1}>
- <div className="box-item green"> Item 2 </div>
- </Item>
- <Item ratio={1}>
- <div className="box-item orange"> Item 3 </div>
- </Item>
- </Box>
- </Item>
- </Box>
- );
- }
- }
- export default App;
- .box-item {
- text-align: center;
- padding-top: 16px;
- font-size: 16px;
- height: 100%;
- }
- .orange { background: #f39e6c }
- .yellow { background: #f5e5a6 }
- .green { background: #94d7c7 }
This code yields the following result.
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.