DevExtreme Angular - 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.
- <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
If you have technical questions, please create a support ticket in the DevExpress Support Center.