Color Box
The ColorBox allows users to enter a color or select it in the drop-down editor. When you create a ColorBox, specify its value property to set the initial color. Users can change the value after they pick a shade, or after they click the OK button. To specify the mode, use the applyValueMode property.
You can hide the editor's drop-down button to allow users to only type in a color code. To do this, disable the showDropDownButton property. Users can also edit the transparency of the selected shade if the editAlphaChannel property is set to true.
Configure the ColorBox
Use the following properties to specify the component's interactivity:
-
readOnly
Specifies whether the ColorBox is read-only. -
disabled
Specifies whether the ColorBox responds to user interaction.
You can specify the following properties to add custom buttons into the input field, or configure the drop-down editor's buttons:
-
buttons
Allows you to add custom buttons to the input text field. -
showClearButton
Specifies whether to display the Clear button in the ColorBox. -
applyButtonText
Specifies the text for the button that applies changes and closes the drop-down editor. -
cancelButtonText
Specifies the text for the button that cancels changes and closes the drop-down editor.
Handle Value Change
Implement the onValueChanged function to handle the value change when users select a color in the drop-down editor. To handle the input value change, use the onInput function.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<div class="form">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
<dx-color-box
value="#f05b41"
[inputAttr]="{ 'aria-label': 'Default mode' }"
></dx-color-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">With alpha channel editing</div>
<div class="dx-field-value">
<dx-color-box
value="#f05b41"
[editAlphaChannel]="true"
[inputAttr]="{ 'aria-label': 'With alpha channel editing' }"
></dx-color-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom button captions</div>
<div class="dx-field-value">
<dx-color-box
value="#f05b41"
applyButtonText="Apply"
cancelButtonText="Decline"
[inputAttr]="{ 'aria-label': 'Custom button captions' }"
></dx-color-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Read only</div>
<div class="dx-field-value">
<dx-color-box
value="#f05b41"
[readOnly]="true"
[inputAttr]="{ 'aria-label': 'Read only' }"
></dx-color-box>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
<dx-color-box
value="#f05b41"
[disabled]="true"
[inputAttr]="{ 'aria-label': 'Disabled' }"
></dx-color-box>
</div>
</div>
</div>
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling</div>
<div class="hero-block">
<div class="color-block" [style.background-color]="currentColor">
<div class="superhero"></div>
</div>
<div class="hero-color-box">
<dx-color-box
[(value)]="currentColor"
applyValueMode="instantly"
[inputAttr]="{ 'aria-label': 'Event Handling' }"
></dx-color-box>
</div>
</div>
</div>
</div>
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxColorBoxModule } 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 {
currentColor = '#f05b41';
}
@NgModule({
imports: [
BrowserModule,
BrowserTransferStateModule,
DxColorBoxModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .form {
min-height: 690px;
}
::ng-deep .form .dx-field-value {
text-align: right;
}
::ng-deep .dx-fieldset-header {
padding: 10px 0;
}
::ng-deep .color-block {
width: 360px;
height: 254px;
background-color: #f05b41;
position: relative;
}
::ng-deep .hero-color-box {
position: absolute;
right: 0;
left: 400px;
top: 110px;
}
::ng-deep .color-block .superhero {
position: absolute;
height: 100%;
width: 100%;
}
::ng-deep .hero-block {
position: relative;
}
::ng-deep .superhero {
background-image: url(../../../../images/hero_white.png);
}
::ng-deep .dx-color-scheme-dark .superhero {
background-image: url(../../../../images/hero_black.png);
}
::ng-deep .dx-color-scheme-darkmoon .superhero {
background-image: url(../../../../images/hero_darkmoon.png);
}
::ng-deep .dx-color-scheme-darkviolet .superhero {
background-image: url(../../../../images/hero_darkviolet.png);
}
::ng-deep .dx-color-scheme-greenmist .superhero {
background-image: url(../../../../images/hero_greenmist.png);
}
::ng-deep .dx-color-scheme-contrast .superhero {
background-image: url(../../../../images/hero_contrast.png);
}
::ng-deep .dx-color-scheme-blue-dark .superhero,
::ng-deep .dx-color-scheme-orange-dark .superhero,
::ng-deep .dx-color-scheme-teal-dark .superhero,
::ng-deep .dx-color-scheme-lime-dark .superhero,
::ng-deep .dx-color-scheme-purple-dark .superhero {
background-image: url(../../../../images/hero_material_dark.png);
}
// 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/
window.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@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.1.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48',
'devextreme-angular': 'npm:devextreme-angular@23.1.5',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.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',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.1.5/*/package.json',
'npm:devextreme-angular@23.1.5/ui/*/package.json',
'npm:devextreme-angular@23.1.5/package.json',
'npm:devexpress-diagram@2.2.1/package.json',
'npm:devexpress-gantt@4.1.48/package.json',
],
};
System.config(window.config);
<!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/23.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/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>