class_="color"

Using <widget class_="color"> creates a widget that allows the end-user to select a color value.

Syntax

<dynamic colorvar="">
    <widget class_="color" value_="@colorvar"/>
</dynamic>

Attributes

label_
Accepts text that is used as a label for the widget.
labelpos_
Accepts a string that specifies the position of the label for the widget.

Valid values are:

  • left
  • right
  • top
  • bottom

The default is left.

labelwidth_
Accepts an integer that specifies the width of the label for the widget.

If the length of the string specified by the label_ attribute is greater than the value specified for labelwidth_, the text will wrap over multiple lines.

If the labelwidth_ attribute is not specified, the default width is the length of the string specified by the label_ attribute.

value_
Accepts a variable that is declared in the containing <dynamic> element. The color value selected is stored in the variable provided.
buttons_
Specifies whether to show Apply and Cancel buttons on the color picker.

Accepts 1 to show the buttons and 0 to hide them. If omitted the option defaults to 0.

labelapply_
Specifies the label of the Apply button.

Accepts a string: (i.e.,labelapply_="This").

labelcancel_
Specifies the label of the Cancel button.

Accepts a string: (i.e.,labelcancel_="Not This").

opacity_
Specifies whether to show an opacity slider to control the opacity of the color applied.

Accepts 1 to show the slider and 0 to hide it. Defaults to 0.

preview_
When mode_="flat", preview_ specifies whether to show a preview square for the currently selected color.

Accepts 1 to show and 0 to hide. Defaults to 1.

enable_
Specifies whether to enable or disable the widget.

Accepts 1 to enable and 0 to disable. Defaults to 1.

autoupdate_
Specifies whether the color selected in the color picker should update its values automatically or wait for a manual input to update.

Valid values are 1 for updating the color selection when the selection changes, and 0, which tells the color picker to hold its current value until a user clicks the Apply button that appears when buttons_="1".

mode_
Specifies whether to use a gradient color picker or a tiled color picker.

Valid values are:

flat
Gradient version
palette
Tiled mode

Defaults to flat.

tilesize_
When mode_="palette", use tilesize_ to specify the size of the tiles in the color palette. Accepts an integer (i.e., tilesize_="10".
columns_
When mode_="palette", columns_ specifies the number of columns to show in the color palette. Accepts an integer value (i.e., columns_="5". Defaults to 10.
palettevalue_
This attribute specifies a dynamic variable whose value determines the colors to show in the palette. This attribute only applies when mode_="palette".

The dynamic variable associated with the palettevalue_ attribute can be set to any of the following valid values:

  • basic
  • websafe
  • office
  • apex
  • austin
  • clarity
  • slipstream
  • metro
  • flow
  • hardcover
  • trek
  • verve
  • monochrome

You may also set the dynamic variable to a custom list of color hex values (e.g., {'#ff0000', '#ff00ff'}).

Example for class_="color"

<dynamic colorvar="red" my_palette="trek">
  <layout>
    <layout>
      <widget class_="text" color_="{@colorvar}" text_="Welcome!" 
       update_="auto" invmode_="hide"/>
    </layout>
    <widget class_="color" label_="Pick a color, any color!" 
      value_="@colorvar" buttons_="1" opacity_="1" autoupdate_="0"   
      mode_="flat" labelapply_="This" labelcancel_="Not This"/>
  </layout>
</dynamic>