The textbox.io color widget offers customisation to adjust the available colour buttons. These changes apply to all features where the widget is used:
The widget will grow or shrink vertically as required to accomodate the list of colors. The column count is not configurable.
This API was introduced in Textbox.io release 2.4.1
The custom colour picker was added in Textbox.io release 2.4.2
The default set of colors includes a color name used for the tooltip and ARIA label. These names are translated to all supported languages, and the API allows use of these translations. To use a translated name, set the text of a custom color to one of the
Translation Key entries from this table; translation even works if the text is not provided but the color matches a translation key.
The default colors, in order, are:
|HTML color value||Translation Key||English Color Name|
|mediumseagreen||Medium Sea Green|
|Array||All colors listed above, in order|
An array of color button objects to show on the widget
|Boolean||true||Whether to show a custom color picker option below the buttons|
The HTML color representation. This string will be set as the color in the document without additional processing.
While the default colors all use hex representation, any valid HTML color value can be used.
Text representation used for the tooltip and ARIA label of the color button. See note above about translations.
If no text is provided, the
This example demonstrates a color configuration where a single row of 5 buttons are shown.
The first three take advantage of the fact that translation keys are also valid HTML color names. The fourth supplies a custom string, and the fifth replaces one of the built-in colors by using a custom color value and a translation key for the text.
<iframe width="100%" height="350" src="//jsfiddle.net/textboxio/gfoa1073/embedded/js,html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>