组件视图 #

组件视图是为特定界面设计的组件的替代版本。它们允许你一次性创建一个组件,然后重新排列、调整大小和重新设计它的元件,以适应你打算使用它的每一个界面。当你在画布上添加一个组件的实例时,你可以选择它的视图来显示。

向组件添加视图 #

要给一个组件添加组件视图,首先要在画布上打开主组件进行编辑。点击画布来聚焦组件本身,然后在 Style 面板中点击 Add Component Views ,打开 Component Views 对话框,在这里你将创建和管理你的视图。

要从一个组件中移除组件视图,点击 Style 面板右上方的 Remove Views

组件视图的继承性 #

组件视图被组织成继承链。链条中的第一个环节,也就是所有其他视图的继承者,是 Base 视图。你添加的每个视图都直接从 Base 视图或从链中的另一个视图继承其元件和元件属性。

例如,一个按钮组件的继承链可能看起来像这样。

一级按钮(基础)>二级按钮 >文本链接按钮

  • Primary Button 视图中进行的编辑也将反映在 Secondary ButtonText Link Button 视图中。

  • Secondary Button 视图中进行的编辑将反映在 Text Link Button 视图中,但不反映在 Primary Button 视图中。

  • Text Link Button 视图中进行的编辑只会影响该视图。

在组件视图中编辑原型 #

一旦你在一个组件上添加了组件视图,你可以通过点击画布顶部的名称来访问每个视图。视图名称的颜色显示它是否会被你在画布上的编辑所影响。

  • Dark Blue: 当前在画布上显示的视图。Edits will affect this view.
  • Light Blue: Affect All Views 的复选框被选中。Edits will affect all views.
  • Grey: Affect All Views 的复选框未被选中。Edits will not affect all views.

此外,如果你在子视图中编辑Widgets(元件)属性,在父视图中对同一属性的编辑将不再影响子视图。例如,如果你在子视图中把一个按钮的填充颜色改为粉红色,然后在父视图中把同一个按钮的填充颜色改为绿色,那么这个按钮在子视图中仍然是粉红色,而不是绿色。

提示

为了充分利用组件视图编辑继承的优势,我们建议你采取自上而下的方法来编辑你的原型,从 Base 视图开始,然后沿着链条向下编辑。

跨视点 Widget 属性 #

你可以在不同的组件视图中自由地改变Widgets(元件)的视觉样式、大小和位置。然而,有些元件属性在每个视图中都是相同的。These include widget text, notes, and interactions/interactive properties. Making edits to these on a widget in one view will always affect all other views as well.

此外,特殊的 widget 属性,如 droplist widget (opens new window) 中的选项,table widget (opens new window) 中的行和列,以及 tree widget (opens new window) 中的节点,也是跨视图共享。

如果你需要一个跨视图的Widgets(元件)属性在你的组件视图中变化,为每个变化创建一个额外的Widgets(元件)副本,并使用 “unplace ”功能来选择Widgets(元件)的哪个版本出现在每个视图中。

未放置的Widgets(元件) #

“未放置 ”的元件是指包含在组件的某些视图中但不包含在其他视图中的元件。在 Outline 面板中,任何已从当前视图中取消放置的元件都以橙色列出。

注意

为了确保你在 Outline 面板中看到已放置和未放置的元件,点击面板右上方的 Sort and Filter 图标,选择 Placed or Unplaced

有两种方法可以从视图中取消Widgets(元件)的位置。

  • 你可以通过右键单击Widgets(元件)并选择 Unplace from View ,将Widgets(元件)从当前视图及其子代中移除。你也可以通过选择Widgets(元件)并按 DELETE 来实现。

  • 如果你在一个子视图中添加一个新的元件,该元件将自动从所有的父视图中取消放置(除非 Affect All Views )。

    注意

    如果你从基本视图中删除一个元件,或者当 Affect All Views 被选中时,该元件将不会被取消放置;相反,it will be deleted from all views

你可以通过右键单击一个未放置的元件,并选择 Place in View ,将其放置在当前视图及其子视图中。

要从所有视图中完全删除一个元件,右击它并选择 Delete from All Views 。这将从组件中完全删除该元件,而不仅仅是取消它的位置。

在画布上选择一个组件视图 #

当你在画布上添加一个组件实例时,使用 Style 面板中的 Component Views 下拉菜单来选择显示它的哪个视图。

组件视图和自适应视图 #

你可以将你的组件视图设置为与你的 adaptive view sets (opens new window) 。确保你的组件视图与你的自适应视图有相同的名称和继承结构,你的组件视图将与你的自适应视图一起在浏览器中自动切换。