ColorPicker
A color picker that displays a list of colors which the user can select by using mouse or keyboard.
Color picker
//<code-header>
fiddle.title = 'Color picker';
//</code-header>
new Button({
appendTo : targetElement,
rendition : 'filled',
text : 'Show menu',
menu : {
colorMenu : {
type : 'colorpicker',
colorSelected({ color }) {
colorBox.style.color = color;
}
}
}
});
const colorBox = DomHelper.createElement({
parent : targetElement,
class : 'b-color-box',
style : {
width : '2em',
height : '2em',
color : '#fff',
borderRadius : '4px',
marginInlineStart : '1em'
}
});new ColorPicker({
appendTo : 'container',
width : '10em',
colorSelected(...args) {
console.log(...args);
}
});
Configs
97
Configs
97Common
listenersEvents
Other
Adds an option to set no background color
The colors property can be an array of string CSS colors or of objects with color
and text properties from which the user can chose from.
Provide an array of string CSS colors:
new ColorMenu({
colors : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
});
The colors can also be named. To do that, put them in an object with a color and a text property, like:
new ColorMenu({
colors : [
{ color : '#000000', text : 'Black'},
{ color : '#FF0000', text : 'Red'},
{ color : '#00FF00', text : 'Green'},
{ color : '#0000FF', text : 'Blue'},
{ color : '#FFFFFF', text : 'White'},
]
});
Default colors are:
Red Pink Magenta Purple Violet Indigo Blue Light-blue Cyan Teal Green Light-green Lime Yellow Amber Orange Deep-orange Brown Lighter-gray Light-gray Gray BlackcolorSelected: function
A callback function that will be called when the user selects a color in the picker.
| Parameter | Type | Description |
|---|---|---|
event | Object | Object containing event data |
event.record | Model | The selected color's record instance |
event.color | String | The string color value |
Returns: void
The color items is displayed in a grid layout with 6 columns as default. Change this to another number to affect appearance.
allowGroupSelectList
callOnFunctionsWidget
columnWidget
displayFieldList
emptyTextList
getItemClsList
getItemStyleList
groupHeaderTplList
isSelectableList
itemsList
itemTplList
multiSelectList
rtlRTL
selectAllItemList
selectedList
spanWidget
storeList
titleList
tooltipTemplateList
virtualizeList
DOM
adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
tagWidget
Float & align
alignWidget
anchorWidget
centeredWidget
constrainToWidget
draggableWidget
floatingWidget
hideAnimationWidget
maximizeOnMobileWidget
positionedWidget
scrollActionWidget
showAnimationWidget
xWidget
yWidget
Layout
alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget
Misc
bubbleEventsEvents
dataFieldWidget
defaultBindPropertyWidget
disabledWidget
elementAttributesWidget
ignoreParentReadOnlyWidget
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable
maskDefaultsWidget
maskedWidget
monitorResizeWidget
ownerWidget
preventTooltipOnTouchWidget
readOnlyWidget
refWidget
rippleWidget
rootElementWidget
showTooltipWhenDisabledWidget
tabWidget
tooltipWidget
Scrolling
scrollableWidget
Properties
81
Properties
81Class hierarchy
Identifies an object as an instance of ColorPicker class, or subclass thereof.
Identifies an object as an instance of ColorPicker class, or subclass thereof.
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isListList
isLocalizableLocalizable
isRTLRTL
isWidgetWidget
Other
Adds an option to set no background color
The colors property can be an array of string CSS colors or of objects with color
and text properties from which the user can chose from.
Provide an array of string CSS colors:
new ColorMenu({
colors : ['#00FFFF', '#F0FFFF', '#89CFF0', '#0000FF', '#7393B3']
});
The colors can also be named. To do that, put them in an object with a color and a text property, like:
new ColorMenu({
colors : [
{ color : '#000000', text : 'Black'},
{ color : '#FF0000', text : 'Red'},
{ color : '#00FF00', text : 'Green'},
{ color : '#0000FF', text : 'Blue'},
{ color : '#FFFFFF', text : 'White'},
]
});
Default colors are:
Red Pink Magenta Purple Violet Indigo Blue Light-blue Cyan Teal Green Light-green Lime Yellow Amber Orange Deep-orange Brown Lighter-gray Light-gray Gray BlackThe color items is displayed in a grid layout with 6 columns as default. Change this to another number to affect appearance.
allowGroupSelectList
allSelectedList
columnWidget
countList
emptyTextList
itemsList
multiSelectList
rtlRTL
selectedList
spanWidget
storeList
titleList
CSS
clsWidget
DOM
appendToWidget
contentWidget
contentElementWidget
datasetWidget
elementWidget
focusableElementWidget
focusElementWidget
htmlWidget
idWidget
insertBeforeWidget
insertFirstWidget
overflowElementWidget
styleWidget
Layout
alignSelfWidget
flexWidget
heightWidget
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
scrollableWidget
widthWidget
Misc
callOnFunctionsEvents
cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget
Functions
65
Functions
65Configuration
Events
detachListenersBase
Misc
animatePropertyBase
callbackBase
downloadTestCaseBase
resolveCallbackBase
updateLocalizationLocalizable
Other
addListenerEvents
announceAriaLiveWidget
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
exitFullscreenWidget
focusWidget
getItemList
hasListenerEvents
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeAllListenersEvents
removeListenerEvents
requestFullscreenWidget
resumeEventsEvents
revertFocusWidget
suspendEventsEvents
toggleCollapseList
triggerEvents
unEvents
unmaskWidget
Widget hierarchy
closestWidget
containsWidget
eachAncestorWidget
eachWidgetWidget
ownsWidget
queryWidget
queryAllWidget
upWidget
Events
19
Events
19beforeDestroyEvents
beforeHideWidget
beforeItemList
beforeShowWidget
catchAllEvents
destroyEvents
elementCreatedWidget
focusInWidget
focusOutWidget
hideWidget
itemList
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
selectionChangeList
showWidget
toggleGroupList
toggleNodeList
Event handlers
19
Event handlers
19onBeforeDestroyEvents
onBeforeHideWidget
onBeforeItemList
onBeforeShowWidget
onCatchAllEvents
onDestroyEvents
onElementCreatedWidget
onFocusInWidget
onFocusOutWidget
onHideWidget
onItemList
onPaintWidget
onReadOnlyWidget
onRecomposeWidget
onResizeWidget
onShowWidget
onToggleGroupList
onToggleNodeList
Typedefs
7
Typedefs
7Describes a color in the color picker.
| Parameter | Type | Description |
|---|---|---|
color | String | The color value |
text | String | The text to display for the color |
AlignSpecWidget
BryntumListenerConfigEvents
CellWidgetContextWidget
ColorWidget
DelayableConfigDelayable
KeyMapConfigKeyMap
CSS variables
47
CSS variables
47| Name | Description |
|---|---|
--b-color-picker-color-border-radius | Border radius for color swatches |
--b-color-picker-color-size | Size of color swatches |
--b-color-picker-gap | Gap between swatches |
--b-color-picker-padding | Color picker padding |
--b-color-picker-color-no-color-color | Color used for no color |
--b-color-picker-columns | Number of columns in the picker layout (overridden for combo pickers) |
| Focused | |
--b-color-picker-color-active-outline | Outline for currently active/focused (when navigating using keyboard) color swatch |
| Hovered | |
--b-color-picker-color-hover-outline | Outline for hovered & selected color swatches |
--b-color-picker-color-outline-offset | Outline offset for hovered & selected color swatches |