公告:所有在
2025 年 4 月 15 日之前注册使用 Earth Engine 的非商业项目都必须
验证是否符合非商业性质的资格条件,才能继续使用 Earth Engine。
ui.Thumbnail.style
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
返回微件的样式 ActiveDictionary,该对象可修改以更新微件的样式。
行为与 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(例如“solid dashed none dotted”)
- borderWidth(例如“1px 0px 1px 0px”)
- fontSize(例如“24px”)
- fontStyle(例如“italic”)
- fontWeight(例如“bold”或“100”)
- fontFamily(例如“monospace”或“serif”)
- textAlign(例如“left”或“center”)
- textDecoration(例如“underline”或“line-through”)
- whiteSpace(例如“nowrap”或“pre”)
- 显示(true 或 false)
支持的自定义布局属性(请参阅 ui.Panel.Layout 文档):
- stretch(“horizontal”“vertical”“both”)
- 位置('top-right'、'top-center'、'top-left'、'bottom-right'、...)
用法 | 返回 |
---|
Thumbnail.style() | ui.data.ActiveDictionary |
参数 | 类型 | 详细信息 |
---|
this:ui.widget | ui.Widget | ui.Widget 实例。 |
示例
Code Editor (JavaScript)
// Define a UI widget and add it to the map.
var widget = ui.Thumbnail({
image: ee.Image.random().visualize({min: 0, max: 1}),
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\u003eThumbnail.style()\u003c/code\u003e returns an \u003ccode\u003eActiveDictionary\u003c/code\u003e that can be used to modify the widget's style properties, such as height, width, color, font, and layout.\u003c/p\u003e\n"],["\u003cp\u003eMany style properties behave like their CSS counterparts, allowing for familiar styling options.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003eActiveDictionary\u003c/code\u003e is mutable, meaning style properties can be dynamically set and updated after the widget is created.\u003c/p\u003e\n"],["\u003cp\u003eCustom layout properties like \u003ccode\u003estretch\u003c/code\u003e and \u003ccode\u003eposition\u003c/code\u003e offer further control over the widget's placement and size.\u003c/p\u003e\n"],["\u003cp\u003eThe provided code examples demonstrate how to access, modify, and apply styles using \u003ccode\u003eThumbnail.style()\u003c/code\u003e and \u003ccode\u003eActiveDictionary\u003c/code\u003e.\u003c/p\u003e\n"]]],["The `widget.style()` method returns an `ActiveDictionary` that controls a widget's styling. Properties include `height`, `width`, `padding`, `margin`, `color`, `border`, `fontSize`, and others. Custom layout properties like `stretch` and `position` are also supported. The `ActiveDictionary` can be modified directly using `set()` to dynamically update the widget's appearance. Style properties can be set individually or as a collection within an object.\n"],null,["# ui.Thumbnail.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| Thumbnail.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.Thumbnail({\n image: ee.Image.random().visualize({min: 0, max: 1}),\n style: {width: '400px', height: '200px'}\n});\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```"]]