ColorisOptions | PrimeFaces JavaScript API Docs

Hierarchy

export=.ColorisVirtualInstanceOptions
- ColorisOptions

Index

Properties

Optional a11y

a11y?: export=.Accessibility

Accessibility messages for various aria attribute etc.

Optional alpha

alpha?: boolean

Enable or disable alpha support.

When disabled, it will strip the alpha value from the existing color value in all formats.

default: true

Optional clearButton

clearButton?: boolean | export=.ClearButtonOptions

Whether to show an optional clear button. Use clearLabel to set the label.

Note that this should be a boolean, a ClearButtonOptions object is still supported for backwards compatibility, but it is deprecated.

default: false

Optional clearLabel

clearLabel?: string

Set the label of the clear button.

default: Clear
since: 0.17.0

Optional closeButton

closeButton?: boolean | export=.CloseButtonOptions

Whether to show an optional close button. Use closeLabel to set the label.

Note that this should be a boolean, a CloseButtonOptions object is still supported for backwards compatibility, but it is deprecated.

default: false

Optional closeLabel

closeLabel?: string

Set the label of the close button.

default: Close
since: 0.17.0

Optional defaultColor

defaultColor?: string

In inline mode, this is the default color that is set when the picker is initialized.

el

el: string

A custom CSS selector to bind the color picker to. This must point to one or more {@link HTMLInputElement}s.

Optional focusInput

focusInput?: boolean

Focus the color value input when the color picker dialog is opened.

default: true

Optional forceAlpha

forceAlpha?: boolean

Set to true to always include the alpha value in the color value even if the opacity is 100%.

default: false

Optional format

format?: export=.ColorFormat

Sets the preferred color string format. The format affects which value is shown in the input field. See ColorFormat for more details.

default: "hex"

Optional formatToggle

formatToggle?: boolean

Set to true to enable format toggle buttons in the color picker dialog.

This will also force the format to auto.

default: true

Optional inline

inline?: boolean

Set to true to use the color picker as an inline widget. In this mode the color picker is always visible and positioned statically within its container, which is by default the body of the document. Use the "parent" option to set a custom container.

Note: In this mode, the best way to get the picked color is by listening to the coloris:pick event and reading the value from the event detail (see the example below). The other way is to read the value of the input field with the ID clr-color-value.

example

document.addEventListener("coloris:pick", event => {
  console.log("New color", event.detail.color);
});

Optional margin

margin?: number

The margin in pixels between the input fields and the color picker's dialog.

default: 2

Optional onChange

onChange?: export=.OnChangeCallback

A function that is called whenever a new color is picked.

since: 0.18.0

Optional parent

parent?: null | string

CSS selector for the parent.

The default behavior is to append the color picker's dialog to the end of the document's body. but it is possible to append it to a custom parent instead. This is especially useful if the color fields are in a scrollable container and you want color picker' dialog to stay anchored to them. You will need to set the position of the container to relative or absolute. Note: This should be a scrollable container with enough space to display the picker.

default: null

Optional rtl

rtl?: boolean

Set to true to activate basic right-to-left support.

default: false

Optional selectInput

selectInput?: boolean

Select and focus the color value input when the color picker dialog is opened.

default: false

Optional swatches

swatches?: string[]

An array of the desired color swatches to display. If omitted or the array is empty, the color swatches will be disabled.

default: []

Optional swatchesOnly

swatchesOnly?: boolean

Set to true to hide all the color picker widgets (spectrum, hue, ...) except the swatches.

default: false

Optional theme

theme?: export=.Theme

The color theme to use for the color picker. More themes might be added in the future. Available themes: default, large, polaroid.

default: "default"

Optional themeMode

themeMode?: export=.ThemeMode

Set the theme to light or dark mode:

light: light mode.
dark: dark mode.
auto: automatically enables dark mode when the user prefers a dark color scheme.

default: "light"

Optional wrap

wrap?: boolean

The bound input fields are wrapped in a div that adds a thumbnail showing the current color and a button to open the color picker (for accessibility only).

If you wish to keep your fields unaltered, set this to false, in which case you will lose the color thumbnail and the accessible button (not recommended).

default: true