Features
This page contains structured information that will help you to start working with DHTMLX Colorpicker and go into deep dive on its functionality.
How to start with DHTMLX Colorpicker
In this section you can find out the ways of Colorpicker initialization and localization, and learn how to integrate Colorpicker into your applications.
Initialization and localization
| Topic | Description |
|---|---|
| Basic initialization | Learn how to initialize Colorpicker (Example) |
| Colorpicker inside Popup | Learn how to initialize Colorpicker in a popup (Example) |
| Localization | Learn how to localize Colorpicker (Example) |
Integration
| Topic | Description |
|---|---|
| Backend integration | Learn how to connect DHTMLX Suite to a backend (Demo) |
| Optimus | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app (recommended framework for creating apps with Suite components) |
| React integration | Learn how to use DHTMLX Colorpicker with React (Demo) |
| Angular integration | Learn how to use DHTMLX Colorpicker with Angular (Demo) |
| Vue integration | Learn how to use DHTMLX Colorpicker with Vue.js (Demo) |
How to configure Colorpicker
In this section you will find out how to configure the modes of displaying Colorpicker.
| Topic | Description |
|---|---|
| Setting Colorpicker mode ("palette", "picker") | Learn how to configure the mode of displaying Colorpicker (Example) |
| Displaying the picker only | Learn how to hide the palette and display the picker only (Example) |
| Displaying the palette only | Learn how to hide the panel with custom colors (Example) |
How to configure palette
In this section you will find out how to configure and customize palette.
| Topic | Description |
|---|---|
| Hiding gray shades | Learn how to hide gray shades at the top of the palette (Example) |
| Displaying custom colors | Learn how to display a list of custom colors in the bottom part of Colorpicker |
| Configuring custom palette | Learn how to display Colorpicker with a custom palette (Example) |
How to customize Colorpicker and change its size
In this section you can learn how to customize Colorpicker and change its width.
| Topic | Description |
|---|---|
| Width of Colorpicker | Learn how to set the necessary width of Colorpicker |
| Styling (custom CSS) | Learn how to change the look and feel of Colorpicker (Example) |
| List of CSS classes | A set of CSS classes provided by the DHTMLX library |
How to work with Colorpicker
In this section you will find out how to set/get selected color, how to set/get custom colors which are displayed at the bottom of Colorpicker, how to change the current mode of Colorpicker, and more.
| Topic | Description |
|---|---|
| Setting selection to a color | Learn how to select a certain color in Colorpicker (Example) |
| Getting selected color | Learn how to get the code of a selected color |
| Setting custom colors | Learn how to display custom colors in the bottom part of Colorpicker (Example) |
| Getting custom colors | Learn how to return the codes of selected custom colors |
| Changing Colorpicker mode | Learn how to change the current mode of Colorpicker (Example) |
| Getting Colorpicker mode | Learn how to get the current mode of displaying Colorpicker |
| Setting focus | Learn how to set focus on the specified value (Example) |
How to work with Colorpicker events
This section explains how to work with Colorpicker events.
| Topic | Description |
|---|---|
| Event basic rules | Learn basic rules on how to work with events |
| Event handling | Learn how to attach, detach, or call the Colorpicker events (Example) |
API reference
In this section you can find out corresponding references of Colorpicker API.
| Topic | Description |
|---|---|
| Colorpicker methods | Check the list of Colorpicker methods |
| Colorpicker events | Check the list of Colorpicker events |
| Colorpicker properties | Check the list of Colorpicker properties |
Common functionality
In this section you will learn about common functionality of the library which can be useful while working with Colorpicker.
| Topic | Description |
|---|---|
| Touch support | Learn how to work with touch support |
| TypeScript support | Learn how to work with TypeScript |
| AwaitRedraw | Learn how to perform the code after the component’s rendering |
Any questions left?
Do you need more functionality? Feel free to share your suggestions in the comments below!