跳转至

Auto sizing（自动调整大小）

Custom widgets can be used in two types of layouts:

  1. To fill the provided container space given by the parent application, for example in Workshop "absolute" and "flex" layouts.
  2. To control the container size based on content size, for example in Workshop "auto" layouts.

To achieve option one, custom widget styles can apply height: 100% and/or width: 100% as is appropriate to the document HTML and body elements. This should make child content responsive to the available space.

To achieve option two, the height and/or width of the document body element will be used for auto sizing in the parent application. Custom widget styles should not apply height: 100% or width: 100% to the document HTML and body elements. Instead, custom widget styles should ensure that the size of the document body element responsively grows or shrinks with respect to the size of its child content. A minimum version of @osdk/widget.client-react ↗ 3.3.0 is required for this functionality.

中文翻译

自动调整大小

自定义组件可在两种布局类型中使用：

  1. 填充父应用程序提供的容器空间，例如 Workshop 中的"绝对"（absolute）和"弹性"（flex）布局。
  2. 根据内容大小控制容器尺寸，例如 Workshop 中的"自动"（auto）布局。

要实现第一种方式，自定义组件样式可对文档 HTML 和 body 元素应用 height: 100% 和/或 width: 100%。这将使子内容根据可用空间进行响应式调整。

要实现第二种方式，文档 body 元素的高度和/或宽度将用于父应用程序中的自动调整大小。自定义组件样式不应对文档 HTML 和 body 元素应用 height: 100% 或 width: 100%。相反，自定义组件样式应确保文档 body 元素的大小根据其子内容的大小进行响应式扩展或收缩。此功能需要 @osdk/widget.client-react ↗ 3.3.0 或更高版本。