格网微件

“格网”微件为布局容器,可用于组织格网中的内容。 格网微件可以包含多个其他微件。

此图演示了格网微件的可能布局之一。

示例

使用此微件可支持以下应用程序设计要求:

  • 您希望在格网中组织页面元素,例如嵌入的媒体。
  • 您希望用户能够展开格网中的各个图像以占据整个页面。

用法说明

添加格网微件时,将显示添加微件选择格网模板按钮。 系统将自动显示后一个按钮的窗口。 可以选择格网模板,然后将微件添加至每个格网项目。 要添加不带模板的微件,单击添加微件按钮,然后从微件库中选择或从插入微件面板拖入微件。

当将新微件拖入格网时,布局将自动发生变化,具体取决于微件放置位置。 如果将微件放在已包含微件的项目的中心,则该微件将添加至新选项卡。

此图显示在格网项目中心放置的微件。

如果将新微件放置在任意位置,而不是在现有格网项目上,则该微件将添加为新项目,并且这两个项目会分割原始项目占据的空间,从而创建格网列或格网行。 可以将光标悬停在项目之间的间隙上,以拖动其边界并调整其大小。 还可以单击项目,然后使用项目工具栏中的水平分割垂直分割按钮以同样方式拆分项目。

此图显示在项目一侧放置的微件。

此图显示在项目下半部分放置的微件。

将新微件拖到已包含多个格网项目的格网微件上时,可以相对于整个格网放置该微件。 随即显示参考线;可以使用这些参考线在整个格网的顶部、底部、左侧和右侧放置微件。

此图显示在格网顶部放置的位置。

此图显示在格网底部放置的位置。

“卡片”和“地图”微件等一些微件允许在其中嵌入其他微件。 添加此类微件时,该微件默认进入锁定状态。 可单击锁定按钮解锁该微件并重新组织任何内部微件。 在锁定状态下,只能更改微件本身的设置。 例如,如果包含的“地图”在格网中包含“绘制”微件,则必须解锁“地图”微件才能移动“绘制”微件。

页面面板的大纲显示了格网微件中包含的微件、选项卡、格网列和格网行的层次结构。 与任何微件相似,您可以选择大纲中的任何格网行或格网列,然后单击更多按钮以显示操作菜单。 格网行和格网列分别具有水平分布空间垂直分布空间按钮。 如果行或列构成选项卡,则可以选择重命名行或列。 格网微件中包含的各个微件在更多菜单上具有水平拆分垂直拆分按钮。

当在应用程序中包含“格网”微件时,该微件可以为用户提供以下交互选项(必须在微件的设置中启用这些选项):

  • 单击展开各个格网项目。 当用户将光标悬停在项目上时,将显示展开按钮 展开
  • 拖动分隔每个格网项目的间隙,调整格网项目大小。

注:
在小屏幕布局中,格网中的所有微件均自动转变为格网选项卡。 但是,可以创建自定义布局以针对不同屏幕大小优化格网。

设置

格网微件包含以下设置:

  • 布局 - 配置布局设置。
    • 填充 - 同时或单独更改微件内边周围的填充空间的大小。 可以指定大小值,以像素 (px) 或百分比 (%) 为单位。
    • 填充颜色 - 更改微件内边缘周围填充空间的颜色。
    • 间隙 - 更改格网项目的间隙的颜色和宽度。 可以指定宽度值,以像素 (px) 为单位。
  • 格网项目 - 定义用户如何在运行时与格网项目进行交互。
    • 允许调整大小 - 允许用于拖动间隙以调整格网项目大小。
    • 允许展开 - 允许用户展开各个格网项目。
      注:

      可在微件的样式设置选项卡中覆盖此设置。 如果您想要用户能够展开一些格网项目,但无法展开其他项目,这非常有用。


在本主题中
  1. 示例
  2. 用法说明
  3. 设置