AI-generated Key Takeaways
-
The widget's style() method returns an ActiveDictionary which can be modified to update the widget's styles.
-
Many style properties like height, width, padding, margin, color, and border behave like their CSS counterparts.
-
Custom layout properties such as stretch and position are also supported.
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', ...)
| Usage | Returns |
|---|---|
Label.
style
()
|
ui.data.ActiveDictionary |
| Argument | Type | Details |
|---|---|---|
|
this:
ui.widget
|
ui.Widget | The ui.Widget instance. |
Examples
Code Editor (JavaScript)
// Define a UI widget and add it to the map. var widget = ui . Label ({ value : 'A label' , style : { width : '400px' , height : '200px' , fontSize : '40px' , color : '484848' } }); 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 );
