Overview of IntegralUI ColorPicker

IntegralUI ColorPicker is a native web component for Angular, React and Vue that allows you to select a color by using a drop-down panel with color palette and slider. In this article, you will find general information about the color picker component, including its properties, events and methods that you can use.

In this example, by clicking on the arrow button a panel will appear showing a color palette and slider. The slider shows a rainbow with all basic colors. Depending on slider position the color palette changes, from where you can select a color by moving the mouse cursor.

The color value appears in the input box below the palette where you can manually enter a specific color. The color format can be one of the following:

• HEX - color value is shown as string of hexadecimal numbers
• RGB - color value is shown as comma separated string of numbers from 0 to 255

You can change the color format by clicking on the button next to the input box. The button title states the current format is use.

Once a color is selected, you can confirm the change by clicking on the check-mark button. To cancel the selection, click on the close button, click outside of the dropdown panel or press the ESCAPE key.

How to Use IntegralUI ColorPicker in Angular, React and Vue

To use the ColorPicker component you need to do the following:

• In app template place the button component using the iui-colorpicker tag name
• Set values for different properties available
• Handle the component events in your code

• JavaScript
• Angular
• React
• Vue

import { IntegralUIColorFormat } from './integralui/components/integralui.core';

. . .

@ViewChild('application', {read: ViewContainerRef, static: true}) applicationRef: ViewContainerRef;

public clrFormat: IntegralUIColorFormat = IntegralUIColorFormat.HEX;
public selColor: string = '#4899e5';
                                    

<iui-colorpicker [appRef]="applicationRef" [colorFormat]="clrFormat" [selectedValue]="selColor"></iui-colorpicker>
                                    

By default, the selected color is displayed in hexadecimal format. You can change the format during run-time by clicking on the format button in dropdown panel or manually from code by setting the colorFormat property.

The appRef property setting is required, because the dropdown panel appears in a popup window. This reference is used to determine the parent component (usually the app root component) that will contain the popup window, so that the dropdown panel appears above other components.

Color Picker as Part of Other Components

ColorPicker component is also usable as part of other components. For example, you can add a color picker to cells in the Grid or TreeGrid component.

IntegralUI ColorPicker - Available Properties, Events and Methods

You can use the following properties to change the appearance and behavior of the ColorPicker component:

• allowAnimation - Determines whether component appearance is animated or not
• appRef - holds a reference to application view
• colorFormat - Determines the color format in use: RGB or HEX
• controlStyle - Specifies an object that contains all style settings for the component
• data - Specifies an object that holds data related to the component
• enabled - Determines whether the component is enabled or disabled
• name - Uniquely identifies the component
• selectedValue - The color that is selected
• size - Specifies the component width and height in pixels.
• state - Specifies the component state: disabled, hovered, etc.

Using the above properties, you can customize the ColorPicker component in a way best suited for your application.

Supported Events

Here is a list of available events:

• enabledChanged - occurs when component is enabled or disabled
• sizeChanged - occurs when component size changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected
• valueChanged - occurs when a input text changes or an option is selected from a dropdown list

When a color is selected from the dropdown panel, the valueChanged event is fired. You can handle this event in your code and add specific action based on the event data.

• JavaScript
• Angular
• React
• Vue

colorValueChanged(e: any){
    console.log("Color value changes to: ", e.value);
}
                                    

<iui-colorpicker [appRef]="applicationRef" (valueChanged)="colorValueChanged($event)"></iui-colorpicker>
                                    

Supported Methods

The following public methods are available:

• refresh - updates the component appearance
• updateLayout - updates the component layout

How to Customize the ColorPicker Appearance

The appearance of ColorPicker component is determined by a set of CSS classes. Using the controlStyle property, you can override these classes by providing your own. This property can accept an object in following format:

colorPickerStyle = {
    general: {
        disabled: 'iui-colorpicker-disabled',
        focused: 'iui-colorpicker-focused',
        normal: 'iui-colorpicker',
        hovered: 'iui-colorpicker-hovered',
        selected: 'iui-colorpicker-selected'
    },
    header: {
        disabled: 'iui-colorpicker-header-disabled',
        focused: 'iui-colorpicker-header-focused',
        normal: 'iui-colorpicker-header',
        hovered: 'iui-colorpicker-header-hovered',
        selected: 'iui-colorpicker-header-selected'
    }
}
                    

To disable animations in the date picker component, set the allowAnimation property to false.

Conclusion

IntegralUI ColorPicker is a web component that you can use in Angular, React and Vue. Using the component properties, you can customize the color picker appearance and behavior. In addition whenever color changes you can handle the fired events in your code and provide specific actions.

The color picker is also usable as part of other components or in Angular Forms.

The ColorPicker component is part of IntegralUI Web.