Page tree
Skip to end of metadata
Go to start of metadata

The textbox.io color widget offers customisation to adjust the available colour buttons. These changes apply to all features where the widget is used:

  • Font and Highlight color
  • Table Cell Border
  • Table Cell Background

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

Default colors

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 valueTranslation KeyEnglish Color Name
#FFFwhiteWhite
#000blackBlack
#444grayGray
#777metalMetal
#CCCsmokeSmoke
#FC1D00redRed
#C81500darkredDark Red
#FF8C00darkorangeDark Orange
#FEBE00orangeOrange
#FFFC00yellowYellow
#22AE50greenGreen
#006400darkgreenDark Green
#3CB371mediumseagreenMedium Sea Green
#8FCD4ElightgreenLight Green
#00FF00limeLime
#0000CDmediumblueMedium Blue
#002360navyNavy
#0173C1blueBlue
#14B2F2lightblueLight Blue
#EE82EEvioletViolet

Properties

PropertyTypeDefaultValue
buttonsArrayAll colors listed above, in order

An array of color button objects to show on the widget

customBooleantrueWhether to show a custom color picker option below the buttons

Color Button objects

PropertyTypeValue
valueString

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.

textString (optional)

Text representation used for the tooltip and ARIA label of the color button. See note above about translations.

If no text is provided, the color string is used as the text string.

Example Configuration

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.

  • No labels