Your search did not match any results.

Styling Mode

This example demonstrates editor styling modes. You can use the Styling Mode select box to change the mode.

Note that in frameworks that support property binding (Angular, AngularJS, Vue, and React), each editor’s stylingMode option is bound to a property you can change using the select box. In jQuery and ASP.NET MVC, the select box changes the global editorStylingMode option that applies the styling mode to all the editors on the page.

Copy to CodeSandBox
<div class="title">Edit Task</div> <div class="editors"> <div class="left"> <dx-text-box value="Samantha Bright" width="100%" placeholder="Owner" [stylingMode]="stylingMode" ></dx-text-box> <dx-text-box value="" width="100%" placeholder="Subject" [stylingMode]="stylingMode" > <dx-validator [validationRules]="[{ type: 'required' }]"></dx-validator> </dx-text-box> </div> <div class="right"> <dx-date-box [value]="date" width="100%" placeholder="Start Date" [stylingMode]="stylingMode" ></dx-date-box> <dx-select-box [items]="[ 'High', 'Urgent', 'Normal', 'Low' ]" value="High" width="100%" placeholder="Priority" [stylingMode]="stylingMode" ></dx-select-box> </div> <div class="center"> <dx-tag-box [items]="[ 'Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed' ]" [value]="[ 'Not Started' ]" [multiline]="false" width="100%" placeholder="Status" [stylingMode]="stylingMode" ></dx-tag-box> <dx-text-area value="Need sign-off on the new NDA agreement. It's important that this is done quickly to prevent any unauthorized leaks." width="100%" placeholder="Details" [stylingMode]="stylingMode" ></dx-text-area> </div> <div class="center"> <dx-button text="Save" type="default" (onClick)="validateClick($event)" class="validate" ></dx-button> </div> </div> <div class="options"> <div class="caption">Styling Mode</div> <div class="option"> <dx-select-box [items]="[ 'outlined', 'filled', 'underlined' ]" [(value)]="stylingMode" ></dx-select-box> </div> </div>
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxSelectBoxModule, DxTextBoxModule, DxTextAreaModule, DxTagBoxModule, DxDateBoxModule, DxButtonModule, DxValidatorModule } from 'devextreme-angular'; import notify from 'devextreme/ui/notify'; import validationEngine from 'devextreme/ui/validation_engine'; if (!/localhost/.test( { enableProdMode(); } @Component({ selector: 'demo-app', providers: [], templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] }) export class AppComponent { stylingMode = "filled"; date = new Date(2020, 4, 3); validateClick(e) { var result = e.validationGroup.validate(); if (result.isValid) { notify('The task was saved successfully.', 'success'); } else { notify('The task was not saved. Please check if all fields are valid.', 'error'); } } constructor() { setTimeout(() => validationEngine.validateGroup()); } } @NgModule({ imports: [ BrowserModule, DxSelectBoxModule, DxTextBoxModule, DxTextAreaModule, DxTagBoxModule, DxDateBoxModule, DxButtonModule, DxValidatorModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .title { padding: 20px 0 20px 0; font-size: 18px; font-weight: 500; } ::ng-deep .editors { margin-right: 320px; } ::ng-deep .editors .left, ::ng-deep .editors .right { display: inline-block; width: 49%; padding-right: 20px; box-sizing: border-box; } ::ng-deep .editors .left > *, ::ng-deep .editors .right > *, ::ng-deep .editors .center > * { margin-bottom: 20px; } ::ng-deep .editors .center { padding: 20px 27px 0 0; } ::ng-deep .validate { float: right; } ::ng-deep .options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15); } ::ng-deep .caption { font-size: 18px; font-weight: 500; } ::ng-deep .option { margin-top: 20px; }
// 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: // System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" } }, paths: { 'npm:': '' }, map: { 'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js', 'typescript': 'npm:typescript@2.2.2/lib/typescript.js', '@angular/core': 'npm:@angular/core@5.1.2/bundles/core.umd.js', '@angular/common': 'npm:@angular/common@5.1.2/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler@5.1.2/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser@5.1.2/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@5.1.2/bundles/platform-browser-dynamic.umd.js', '@angular/router': 'npm:@angular/router@5.1.2/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms@5.1.2/bundles/forms.umd.js', '@angular/common/http': 'npm:@angular/common@5.1.2/bundles/common-http.umd.js', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs@5.3.1', 'devextreme': 'npm:devextreme@18.2', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'quill-delta-to-html': 'npm:quill-delta-to-html@0.10.4/dist/browser/QuillDeltaToHtmlConverter.bundle.js', 'devextreme-angular': 'npm:devextreme-angular@18.2', 'globalize': 'npm:globalize/dist/globalize', 'cldr': 'npm:cldrjs/dist/cldr' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' }, 'globalize': { main: '../globalize.js', defaultExtension: 'js' }, 'cldr': { main: '../cldr.js', defaultExtension: 'js' } } });
<!DOCTYPE html> <html xmlns=""> <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="" /> <link rel="dx-theme" data-theme="generic.light" href="" /> <link rel="dx-theme" data-theme="android5.light" href="" /> <link rel="dx-theme" data-theme="ios7.default" href="" /> <link rel="dx-theme" data-theme="" href="" /> <link rel="dx-theme" data-theme="win10.white" href="" /> <script src=""></script> <script src=""></script> <script src=""></script> <script src=""></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>