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 property 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 property that applies the styling mode to all the editors on the page.

Backend API
Copy to CodeSandBox
import React from 'react'; import SelectBox from 'devextreme-react/select-box'; import TagBox from 'devextreme-react/tag-box'; import TextBox from 'devextreme-react/text-box'; import DateBox from 'devextreme-react/date-box'; import TextArea from 'devextreme-react/text-area'; import Button from 'devextreme-react/button'; import Validator, { RequiredRule } from 'devextreme-react/validator'; import notify from 'devextreme/ui/notify'; import validationEngine from 'devextreme/ui/validation_engine'; const stylingModes = [ 'outlined', 'filled', 'underlined' ]; const statuses = [ 'Not Started', 'Need Assistance', 'In Progress', 'Deferred', 'Completed' ]; const defaultStatus = [statuses[0]]; const priorities = [ 'High', 'Urgent', 'Normal', 'Low' ]; class App extends React.Component { constructor(props) { super(props); this.state = { date: new Date(2020, 4, 3), stylingMode: 'filled' }; this.validateClick = this.validateClick.bind(this); this.stylingModeChange = this.stylingModeChange.bind(this); } render() { setTimeout(() => validationEngine.validateGroup()); return ( <React.Fragment> <div className="title">Edit Task</div> <div className="editors"> <div className="left"> <TextBox stylingMode={this.state.stylingMode} defaultValue="Samantha Bright" width="100%" placeholder="Owner" /> <TextBox stylingMode={this.state.stylingMode} defaultValue="" width="100%" placeholder="Subject" > <Validator> <RequiredRule /> </Validator> </TextBox> </div> &nbsp; <div className="right"> <DateBox defaultValue={} stylingMode={this.state.stylingMode} width="100%" placeholder="Start Date" /> <SelectBox items={priorities} stylingMode={this.state.stylingMode} defaultValue="High" width="100%" placeholder="Priority" /> </div> <div className="center"> <TagBox items={statuses} defaultValue={defaultStatus} multiline={false} stylingMode={this.state.stylingMode} width="100%" placeholder="Status" /> <TextArea stylingMode={this.state.stylingMode} defaultValue={'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" /> </div> <div className="center"> <Button onClick={this.validateClick} text="Save" type="default" className="validate" /> </div> </div> <div className="options"> <div className="caption">Styling Mode</div> <div className="option"> <SelectBox items={stylingModes} value={this.state.stylingMode} onValueChanged={this.stylingModeChange} /> </div> </div> </React.Fragment> ); } 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'); } } stylingModeChange(e) { this.setState({ stylingMode: e.value }); } } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render( <App />, document.getElementById('app') );
<!DOCTYPE html> <html> <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="stylesheet" type="text/css" href="" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src=""></script> <script src=""></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
.title { padding: 20px 0 20px 0; font-size: 18px; font-weight: 500; } .editors { margin-right: 320px; } .editors .left, .editors .right { display: inline-block; width: 49%; padding-right: 20px; box-sizing: border-box; } .editors .left > *, .editors .right > *, .editors .center > * { margin-bottom: 20px; } .editors .center { padding: 20px 27px 0 0; } .validate { float: right; } .options { padding: 20px; position: absolute; bottom: 0; right: 0; width: 260px; top: 0; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 20px; }
window.config = { transpiler: 'plugin-babel', meta: { 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': '' }, defaultExtension: 'js', map: { 'react': 'npm:react@17.0.2/umd/react.development.js', 'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js', 'prop-types': 'npm:prop-types@15.7.2/prop-types.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@21.1.6/cjs', 'devextreme-react': 'npm:devextreme-react@21.1.6', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.4.2/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.32/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@3.0.14/dist/dx-gantt.js', '@devextreme/vdom': 'npm:@devextreme/vdom@1.2.2', 'inferno': 'npm:inferno@7.4.10/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.10/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.10/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom@1.0.7/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.10/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.10/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.10/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.10/dist/inferno-extras.min.js', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js' }, packages: { 'devextreme': { defaultExtension: 'js' }, '@devextreme/vdom': { defaultExtension: 'js' }, 'devextreme-react': { main: 'index.js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, packageConfigPaths: [ "npm:@devextreme/*/package.json", ], babelOptions: { sourceMaps: false, stage0: true, react: true } }; System.config(window.config);