DevExtreme jQuery - Overview
The ColorBox is a widget that allows an end user to enter a color or pick it out from the drop-down editor.
The following code adds a simple ColorBox to your page.
jQuery
HTML
JavaScript
<div id="colorBoxContainer"></div>
$(function() {
$("#colorBoxContainer").dxColorBox({
value: "#FF0000"
});
});Angular
HTML
TypeScript
<dx-color-box
[(value)]="color">
</dx-color-box>
import { DxColorBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
color: string = "#FF0000"
}
@NgModule({
imports: [
// ...
DxColorBoxModule
],
// ...
})Vue
App.vue
<template>
<DxColorBox
:value.sync="color"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import DxColorBox from 'devextreme-vue/color-box';
export default {
components: {
DxColorBox
},
data() {
return {
color: "#FF0000"
};
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import ColorBox from 'devextreme-react/color-box';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color: "#FF0000"
};
this.handleValueChange = this.handleValueChange.bind(this);
}
handleValueChange(e) {
this.setState({
color: e.value
});
}
render() {
return (
<ColorBox
value={this.state.color}
onValueChanged={this.handleValueChange}
/>
);
}
}
export default App;The ColorBox accepts colors in hexadecimal ("#FF0000"), RGB ("rgb(255, 0, 0)") and RGBA ("rgba(255, 0, 0, 1)") formats, as well as color names. When an end user selects a color from the drop-down editor, the textual representation of the selected color is hexadecimal.
See Also
Feedback