Color Box

import { AXColorBoxModule } from '@acorex/components/color-box';

Color Box component is a useful tool for selecting and displaying colors in an Angular application. It features a color palette popover, displays the selected color code, and supports disabled and readonly modes. With these functionalities, it simplifies the color selection process while offering customization options to meet different application needs and design preferences.

Overview

In this section, you can test different options of this component and see the output in real time

#3b82f6

Look

Solid

Show Badge

Show Value

Show Clear Button

Show Icon

Readonly

Disabled

Value: #3b82f6

Usage

A simple example of using ax-color-box

Preview

Code

Using Decorators

You can use decorators. For example, you can use ax-prefix, ax-suffix at the beginning and end of the text box to display text or anything else.

Preview

Code

Read-only

You can readonly ax-color-box by readonly property.

Preview

Code

Disabled

You can disabled ax-color-box by disabled property.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-color-box-width	100%	Width of the color box.
--ax-comp-color-box-gap	0.75rem	Gap between elements within the color box.
--ax-comp-color-box-font-size	var(--ax-comp-editor-font-size)	Font size within the color box. Uses the editor font size.
--ax-comp-color-box-badge-width	2.5rem	Width of the color badge within the color box.

Props

disabled	boolean	false	Disables the color box.
look	AXStyleLookType	solid	Specifies the appearance of the color box.
readonly	boolean	false	Determines if the color box is read-only.
tabIndex	number	0	Specifies the tab index of the color box.
placeholder	string	-	Specifies the placeholder text of the color box.
minValue	-	-	Specifies the minimum value for the color box.
maxValue	-	-	Specifies the maximum value for the color box.
value	string	#3b82f6	Specifies the value of the color box.
state	AXComponentState	clear	Specifies the state of the color box.
name	string	-	Specifies the name of the color box.
id	string	-	Specifies the ID of the color box.
type	-	-	Specifies the type of the color box.

Methods

colorChange	AXStyleColorType	Specifies the function to be called when the color of the color box changes.
lookChange	AXStyleLookType	Specifies the function to be called when the appearance of the color box changes.
validationRulesChange	AXFormValidationRule[]	Specifies the function to be called when the validation rules of the color box change.
stateChange	AXComponentState	Specifies the function to be called when the state of the color box changes.
readonlyChange	boolean	Specifies the function to be called when the readonly state of the color box changes.
valueChange	any	Specifies the function to be called when the value of the color box changes.
onValueChanged	AXValueChangedEvent<any>	Specifies the function to be called when the value of the color box changes.
onKeyPress	AXHtmlEvent<KeyboardEvent>	Specifies the function to be called when a key is pressed while the color box is focused.
onKeyUp	AXHtmlEvent<KeyboardEvent>	Specifies the function to be called when the up key is pressed while the color box is focused.
onKeyDown	AXHtmlEvent<KeyboardEvent>	Specifies the function to be called when the down key is pressed while the color box is focused.
onBlur	AXFocusEvent	Specifies the function to be called when the color box loses focus.
onFocus	AXFocusEvent	Specifies the function to be called when the color box gains focus.
disabledChange	boolean	Specifies the function to be called when the disabled state of the color box changes.
onClosed	AXEvent	Specifies the function to be called when the color box is closed.
onOpened	AXEvent	Specifies the function to be called when the color box is opened.