DevExtreme jQuery - 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
HTML
JavaScript
CSS
<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
HTML
TypeScript
CSS
<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 }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
Feedback