Vue ColorBox - Support Alpha Channel
By default, the ColorBox does not allow an end user to control the transparency, or alpha channel component, of the selected color. If you need to allow this, set the editAlphaChannel property to true. This setting adds a slider that regulates transparency to the drop-down editor, and changes the textual representation of the selected color from hexadecimal to RGBA.
jQuery
$(function() { $("#colorBoxContainer").dxColorBox({ value: "rgba(255, 144, 0, 0.3)", editAlphaChannel: true }); });
Angular
<dx-color-box [(value)]="color" [editAlphaChannel]="true"> </dx-color-box>
import { DxColorBoxModule } from "devextreme-angular"; // ... export class AppComponent { color: string = "rgba(255, 144, 0, 0.3)" } @NgModule({ imports: [ // ... DxColorBoxModule ], // ... })
Vue
<template> <DxColorBox v-model:value="color" :edit-alpha-channel="true" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxColorBox from 'devextreme-vue/color-box'; export default { components: { DxColorBox }, data() { return { color: "rgba(255, 144, 0, 0.3)" }; } } </script>
React
import React from 'react'; 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 = { value: "rgba(255, 144, 0, 0.3)" } this.handleValueChange = this.handleValueChange.bind(this); } handleValueChange(e) { this.setState({ value: e.value }); } render() { return ( <ColorBox value={this.state.value} editAlphaChannel={true} onValueChanged={this.handleValueChange} /> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.