DevExtreme React - Overview
The Box widget allows you to arrange various elements within it. This widget is separate and adaptive and acts as the layout's building block.
The following code adds a simple Box containing three items to your page. These items are plain texts placed in differently-colored rectangles arranged in a row. Equal ratio option values ensure they have equal widths.
jQuery
<div id="boxContainer"> <div class="box-item orange" data-options="dxItem: { ratio: 1 }"> Item 1 </div> <div class="box-item yellow" data-options="dxItem: { ratio: 1 }"> Item 2 </div> <div class="box-item green" data-options="dxItem: { ratio: 1 }"> Item 3 </div> </div>
$(function() { $("#boxContainer").dxBox({ direction: "row", height: 100 }); });
.box-item { text-align: center; padding-top: 34px; font-size: 16px; } .orange { background: #f39e6c } .yellow { background: #f5e5a6 } .green { background: #94d7c7 }
Angular
<dx-box direction="row" [height]="100"> <dxi-item class="box-item orange" [ratio]="1"> Item 1 </dxi-item> <dxi-item class="box-item yellow" [ratio]="1"> Item 2 </dxi-item> <dxi-item class="box-item green" [ratio]="1"> Item 3 </dxi-item> </dx-box>
import { DxBoxModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxBoxModule ], // ... })
.box-item { text-align: center; padding-top: 34px; font-size: 16px; } .orange { background: #f39e6c } .yellow { background: #f5e5a6 } .green { background: #94d7c7 }
Vue
<template> <DxBox direction="row" :height="100"> <DxItem :ratio="1"> <template #default> <div class="box-item orange"> Item 1 </div> </template> </DxItem> <DxItem :ratio="1"> <template #default> <div class="box-item yellow"> Item 2 </div> </template> </DxItem> <DxItem :ratio="1"> <template #default> <div class="box-item green"> Item 3 </div> </template> </DxItem> </DxBox> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import { DxBox, DxItem } from 'devextreme-vue/box'; export default { components: { DxBox, DxItem } }; </script> <style> .box-item { text-align: center; padding-top: 34px; font-size: 16px; } .orange { background: #f39e6c } .yellow { background: #f5e5a6 } .green { background: #94d7c7 } </style>
React
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Box, { Item } from 'devextreme-react/box'; class App extends React.Component { render() { return ( <Box direction="row" height={100}> <Item ratio={1}> <div className="box-item orange"> Item 1 </div> </Item> <Item ratio={1}> <div className="box-item yellow"> Item 2 </div> </Item> <Item ratio={1}> <div className="box-item green"> Item 3 </div> </Item> </Box> ); } } export default App;
.box-item { text-align: center; padding-top: 34px; font-size: 16px; height: 100%; } .orange { background: #f39e6c } .yellow { background: #f5e5a6 } .green { background: #94d7c7 }
Note that the Box items in the code above are declared using the dxItem markup component. An object passed to this component can have the following fields:
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- Box - Specify an Item Size
- Box - Arrange and Align Items
- Box - Nest One Box into Another
- Box API Reference
If you have technical questions, please create a support ticket in the DevExpress Support Center.