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
<dx-box direction="row" width="100%" [height]="75"> <dxi-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-item> <dxi-item class="rect demo-light" [ratio]="2"> ratio = 2 </dxi-item> <dxi-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-item> </dx-box> <br> <dx-box direction="row" width="100%" [height]="75"> <dxi-item class="rect demo-dark" [ratio]="0" [baseSize]="150"> 150px </dxi-item> <dxi-item class="demo-light" [ratio]="1"> <dx-box direction="row" width="100%" [height]="75" align="center" crossAlign="center"> <dxi-item [ratio]="0" [baseSize]="50"> <div class="small"></div> </dxi-item> <dxi-item [ratio]="0" [baseSize]="50"> <div class="small"></div> </dxi-item> <dxi-item [ratio]="0" [baseSize]="50"> <div class="small"></div> </dxi-item> </dx-box> </dxi-item> <dxi-item class="rect demo-dark" [ratio]="0" baseSize="10%"> 10% </dxi-item> </dx-box> <br> <dx-box direction="col" width="100%" [height]="250"> <dxi-item class="rect demo-dark header" [ratio]="1"> Header </dxi-item> <dxi-item [ratio]="2" [baseSize]="0"> <dx-box direction="row" width="100%" [height]="125"> <dxi-item class="rect demo-dark" [ratio]="1"> Left Bar </dxi-item> <dxi-item class="rect demo-light" [ratio]="1"> Content </dxi-item> <dxi-item class="rect demo-dark" [ratio]="1"> Right Bar </dxi-item> </dx-box> </dxi-item> <dxi-item class="rect demo-dark footer" [ratio]="1"> Footer </dxi-item> </dx-box>
import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxBoxModule } from 'devextreme-angular'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { } @NgModule({ imports: [ BrowserModule, DxBoxModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .rect{ text-align: center; font-size: 30px; padding-top: 10px; height: 100%; } ::ng-deep .demo-light{ background: rgba(245, 229, 166, 0.5) } ::ng-deep .demo-dark{ background: rgba(148, 215, 199, 0.5); } ::ng-deep .demo-dark.header{ background: rgba(243, 158, 108, 0.5); } ::ng-deep .demo-dark.footer{ background: rgba(123, 155, 207, 0.5); } ::ng-deep .small{ height: 50px; border: 1px solid lightgray; }
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, 'devextreme/localization.js': { "esModule": true } }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.5.3/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib@2.0.3/tslib.js', 'rxjs': 'npm:rxjs@6.3.3', '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', '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', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.8', 'devextreme-angular': 'npm:devextreme-angular@20.2.4', 'preact': 'npm:preact@10.5.7/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.7/hooks/dist/hooks.js' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular/*/package.json", "npm:devextreme-angular/ui/*/package.json", "npm:devextreme-angular/package.json", "npm:devexpress-diagram/package.json", "npm:devexpress-gantt/package.json", ] });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <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" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.10.2/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>