公告:所有在
2025 年 4 月 15 日之前注册使用 Earth Engine 的非商业项目都必须
验证是否符合非商业性质的资格条件,才能继续使用 Earth Engine。
ui.SplitPanel.style
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
返回 widget 的样式 ActiveDictionary,该样式可修改以更新 widget 的样式。
行为与 CSS 对应属性类似的属性:
- height、maxHeight、minHeight(例如“100px”)
- width、maxWidth、minWidth(例如“100px”)
- 内边距、外边距(例如“4px 4px 4px 4px”或简写为“4px”)
- color、backgroundColor(例如“red”或“#FF0000”)
- 边框(例如“1px solid black”)
- borderColor(例如:'red black blue #FF0000')
- borderRadius(例如“10px”)
- borderStyle(例如“实线 虚线 无 点划线”)
- borderWidth(例如“1px 0px 1px 0px”)
- fontSize(例如“24px”)
- fontStyle(例如“italic”)
- fontWeight(例如“bold”或“100”)
- fontFamily(例如“monospace”或“serif”)
- textAlign(例如“left”或“center”)
- textDecoration(例如“下划线”或“删除线”)
- whiteSpace(例如“nowrap”或“pre”)
- shown(true 或 false)
支持的自定义布局属性(请参阅 ui.Panel.Layout 文档):
- 拉伸(“horizontal”“vertical”“both”)
- 位置(“右上角”“顶部居中”“左上角”“右下角”等)
用法 | 返回 |
---|
SplitPanel.style() | ui.data.ActiveDictionary |
参数 | 类型 | 详细信息 |
---|
此:ui.widget | ui.Widget | ui.Widget 实例。 |
示例
代码编辑器 (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);
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\u003cp\u003e\u003ccode\u003ewidget.style()\u003c/code\u003e returns an ActiveDictionary that can be used to modify the widget's appearance, including properties like height, width, color, and border.\u003c/p\u003e\n"],["\u003cp\u003eYou can directly manipulate the widget's style using standard CSS properties such as \u003ccode\u003epadding\u003c/code\u003e, \u003ccode\u003emargin\u003c/code\u003e, \u003ccode\u003efontSize\u003c/code\u003e, and more.\u003c/p\u003e\n"],["\u003cp\u003eCustom layout properties such as \u003ccode\u003estretch\u003c/code\u003e and \u003ccode\u003eposition\u003c/code\u003e are also supported to control widget placement and resizing behavior.\u003c/p\u003e\n"],["\u003cp\u003eThe returned ActiveDictionary is mutable, meaning changes made to it will directly update the widget's style in real-time.\u003c/p\u003e\n"],["\u003cp\u003eThe provided examples showcase how to access, modify, and apply styles using the \u003ccode\u003ewidget.style()\u003c/code\u003e method and the ActiveDictionary.\u003c/p\u003e\n"]]],["The `style()` method returns a widget's `ActiveDictionary`, enabling style modifications. This includes properties like `height`, `width`, `padding`, `margin`, `color`, `backgroundColor`, `border`, `fontSize`, `fontStyle`, `fontWeight`, `fontFamily`, `textAlign`, `textDecoration`, `whiteSpace`, and `shown`. Custom layout properties such as `stretch` and `position` are also supported. The `ActiveDictionary` is mutable, allowing direct updates to the widget's style properties, as shown in the code examples.\n"],null,["# ui.SplitPanel.style\n\n\u003cbr /\u003e\n\nReturns the widget's style ActiveDictionary, which can be modified to update the widget's styles.\n\n\u003cbr /\u003e\n\nProperties which behave like their CSS counterparts:\n\n- height, maxHeight, minHeight (e.g. '100px')\n\n- width, maxWidth, minWidth (e.g. '100px')\n\n- padding, margin (e.g. '4px 4px 4px 4px' or simply '4px')\n\n- color, backgroundColor (e.g. 'red' or '#FF0000')\n\n- border (e.g. '1px solid black')\n\n- borderColor (e.g. 'red black blue #FF0000')\n\n- borderRadius (e.g. '10px')\n\n- borderStyle (e.g. 'solid dashed none dotted')\n\n- borderWidth (e.g. '1px 0px 1px 0px')\n\n- fontSize (e.g. '24px')\n\n- fontStyle (e.g. 'italic')\n\n- fontWeight (e.g. 'bold' or '100')\n\n- fontFamily (e.g. 'monospace' or 'serif')\n\n- textAlign (e.g. 'left' or 'center')\n\n- textDecoration (e.g. 'underline' or 'line-through')\n\n- whiteSpace (e.g. 'nowrap' or 'pre')\n\n- shown (true or false)\n\nSupported custom layout properties (see ui.Panel.Layout documentation):\n\n- stretch ('horizontal', 'vertical', 'both')\n\n- position ('top-right', 'top-center', 'top-left', 'bottom-right', ...)\n\n| Usage | Returns |\n|----------------------|--------------------------|\n| SplitPanel.style`()` | ui.data.ActiveDictionary |\n\n| Argument | Type | Details |\n|-------------------|-----------|-------------------------|\n| this: `ui.widget` | ui.Widget | The ui.Widget instance. |\n\nExamples\n--------\n\n### Code Editor (JavaScript)\n\n```javascript\n// Define a UI widget and add it to the map.\nvar widget = ui.SplitPanel({style: {width: '400px', height: '200px'}});\nMap.add(widget);\n\n// View the UI widget's style properties; an ActiveDictionary.\nprint(widget.style());\n\n// ActiveDictionaries are mutable; set a style property.\nwidget.style().set('backgroundColor', 'lightgray');\nprint(widget.style());\n\n// Define the UI widget's style ActiveDictionary as a variable.\nvar widgetStyle = widget.style();\nprint(widgetStyle);\n\n// Set the UI widget's style properties from the ActiveDictionary variable.\nwidgetStyle.set({border: '5px solid darkgray'});\nprint(widgetStyle);\n```"]]