If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React, { useCallback, useState } from 'react';
import ColorBox, { ColorBoxTypes } from 'devextreme-react/color-box';
const defaultModeLabel = { 'aria-label': 'Default mode' };
const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' };
const customButtonCaptionsLabel = { 'aria-label': 'Custom button captions' };
const readOnlyLabel = { 'aria-label': 'Read only' };
const disabledLabel = { 'aria-label': 'Disabled' };
const eventHandlingLabel = { 'aria-label': 'Event Handling' };
function App() {
const [color, setColor] = useState('#f05b41');
const handleColorChange = useCallback(({ value }: ColorBoxTypes.ValueChangedEvent) => {
setColor(value);
}, []);
return (
<div className="form">
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Default mode</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
inputAttr={defaultModeLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With alpha channel editing</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
editAlphaChannel
inputAttr={alphaChannelLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Custom button captions</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
applyButtonText="Apply"
cancelButtonText="Decline"
inputAttr={customButtonCaptionsLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Read only</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
readOnly={true}
inputAttr={readOnlyLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Disabled</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
disabled={true}
inputAttr={disabledLabel}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">Event Handling</div>
<div className="hero-block">
<div
className="color-block"
style={{ backgroundColor: color }}
>
<div className="superhero"></div>
</div>
<div className="hero-color-box">
<ColorBox
value={color}
applyValueMode="instantly"
inputAttr={eventHandlingLabel}
onValueChanged={handleColorChange}
/>
</div>
</div>
</div>
</div>
);
}
export default App;
xxxxxxxxxx
import React, { useCallback, useState } from 'react';
import ColorBox from 'devextreme-react/color-box';
const defaultModeLabel = { 'aria-label': 'Default mode' };
const alphaChannelLabel = { 'aria-label': 'With alpha channel editing' };
const customButtonCaptionsLabel = { 'aria-label': 'Custom button captions' };
const readOnlyLabel = { 'aria-label': 'Read only' };
const disabledLabel = { 'aria-label': 'Disabled' };
const eventHandlingLabel = { 'aria-label': 'Event Handling' };
function App() {
const [color, setColor] = useState('#f05b41');
const handleColorChange = useCallback(({ value }) => {
setColor(value);
}, []);
return (
<div className="form">
<div className="dx-fieldset">
<div className="dx-field">
<div className="dx-field-label">Default mode</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
inputAttr={defaultModeLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">With alpha channel editing</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
editAlphaChannel
inputAttr={alphaChannelLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Custom button captions</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
applyButtonText="Apply"
cancelButtonText="Decline"
inputAttr={customButtonCaptionsLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Read only</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
readOnly={true}
inputAttr={readOnlyLabel}
/>
</div>
</div>
<div className="dx-field">
<div className="dx-field-label">Disabled</div>
<div className="dx-field-value">
<ColorBox
defaultValue="#f05b41"
disabled={true}
inputAttr={disabledLabel}
/>
</div>
</div>
</div>
<div className="dx-fieldset">
<div className="dx-fieldset-header">Event Handling</div>
<div className="hero-block">
<div
className="color-block"
style={{ backgroundColor: color }}
>
<div className="superhero"></div>
</div>
<div className="hero-color-box">
<ColorBox
value={color}
applyValueMode="instantly"
inputAttr={eventHandlingLabel}
onValueChanged={handleColorChange}
/>
</div>
</div>
</div>
</div>
);
}
export default App;
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'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/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'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/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',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// 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',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.form {
min-height: 690px;
}
.form .dx-field-value {
text-align: right;
}
.dx-fieldset-header {
padding: 10px 0;
}
.color-block {
width: 360px;
height: 254px;
background-color: #f05b41;
position: relative;
}
.hero-color-box {
position: absolute;
right: 0;
left: 400px;
top: 110px;
}
.color-block .superhero {
position: absolute;
height: 100%;
width: 100%;
}
.hero-block {
position: relative;
}
.superhero {
background-image: url("images/hero_white.png");
}
.dx-color-scheme-dark .superhero {
background-image: url("images/hero_black.png");
}
.dx-color-scheme-darkmoon .superhero {
background-image: url("images/hero_darkmoon.png");
}
.dx-color-scheme-darkviolet .superhero {
background-image: url("images/hero_darkviolet.png");
}
.dx-color-scheme-greenmist .superhero {
background-image: url("images/hero_greenmist.png");
}
.dx-color-scheme-contrast .superhero {
background-image: url("images/hero_contrast.png");
}
.dx-color-scheme-blue-dark .superhero,
.dx-color-scheme-orange-dark .superhero,
.dx-color-scheme-teal-dark .superhero,
.dx-color-scheme-lime-dark .superhero,
.dx-color-scheme-purple-dark .superhero {
background-image: url("images/hero_material_dark.png");
}
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.