ui.Checkbox.style

AI-generated Key Takeaways

outlined_flag

• widget.style() returns an ActiveDictionary that can be used to modify the widget's appearance, supporting standard CSS properties like height, width, color, font, and more.

• Custom layout properties such as 'stretch' and 'position' can be applied using the style() method for advanced widget positioning.

• Modifying the ActiveDictionary returned by widget.style() directly updates the widget's styles in real-time.

• An example use case demonstrates creating a checkbox, accessing its style properties, and dynamically updating its style using the ActiveDictionary.

Properties which behave like their CSS counterparts:

  - height, maxHeight, minHeight (e.g. '100px')

  - width, maxWidth, minWidth (e.g. '100px')

  - padding, margin (e.g. '4px 4px 4px 4px' or simply '4px')

  - color, backgroundColor (e.g. 'red' or '#FF0000')

  - border (e.g. '1px solid black')

  - borderColor (e.g. 'red black blue #FF0000')

  - borderRadius (e.g. '10px')

  - borderStyle (e.g. 'solid dashed none dotted')

  - borderWidth (e.g. '1px 0px 1px 0px')

  - fontSize (e.g. '24px')

  - fontStyle (e.g. 'italic')

  - fontWeight (e.g. 'bold' or '100')

  - fontFamily (e.g. 'monospace' or 'serif')

  - textAlign (e.g. 'left' or 'center')

  - textDecoration (e.g. 'underline' or 'line-through')

  - whiteSpace (e.g. 'nowrap' or 'pre')

  - shown (true or false)

Supported custom layout properties (see ui.Panel.Layout documentation):

  - stretch ('horizontal', 'vertical', 'both')

  - position ('top-right', 'top-center', 'top-left', 'bottom-right', ...)

Examples

// Define a UI widget and add it to the map.
var widget = ui.Checkbox({label: 'A ui.Checkbox', style: {width: '400px'}});
Map.add(widget);

// View the UI widget's style properties; an ActiveDictionary.
print(widget.style());

// ActiveDictionaries are mutable; set a style property.
widget.style().set('color', 'blue');
print(widget.style());

// Define the UI widget's style ActiveDictionary as a variable.
var widgetStyle = widget.style();
print(widgetStyle);

// Set the UI widget's style properties from the ActiveDictionary variable.
widgetStyle.set({border: '5px solid darkgray'});
print(widgetStyle);