ui.SplitPanel.style

  • widget.style() returns an ActiveDictionary that can be used to modify the widget's appearance, including properties like height, width, color, and border.

  • You can directly manipulate the widget's style using standard CSS properties such as padding, margin, fontSize, and more.

  • Custom layout properties such as stretch and position are also supported to control widget placement and resizing behavior.

  • The returned ActiveDictionary is mutable, meaning changes made to it will directly update the widget's style in real-time.

  • The provided examples showcase how to access, modify, and apply styles using the widget.style() method and the ActiveDictionary.

Returns the widget's style ActiveDictionary, which can be modified to update the widget's styles.

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', ...)

UsageReturns
SplitPanel.style()ui.data.ActiveDictionary
ArgumentTypeDetails
this: ui.widgetui.WidgetThe ui.Widget instance.

Examples

Code Editor (JavaScript)

// Define a UI widget and add it to the map.
var widget = ui.SplitPanel({style: {width: '400px', height: '200px'}});
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('backgroundColor', 'lightgray');
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);