MenuToggle Menu

组件

组件是由图层与交互构成的可复用集合。任意图层和交互构成的集合都可转換为组件,并通过创建子版组件将组仵复用于各场景的任意位置。该功能可以避免不必要的重复性工作、提升每一场景的易读性,从根本上提高原型设计工作流效率。

使用组件

从场景中创建组件

你可以从场景中创建组件。选择一个或多个需要转換为组件的图层,然后点击工具栏上的"组件"图标,或右键点击已选择的图层并在弹出菜单中选择"转换为组件",即可自动创建一个包含了相应图层与交互的组件。同时,该组件的一个子版组件将替换垣原有图层。

[object Object]

直接创建组件

此外,还可以从空内容开始创建组件。打开左侧的组件面板井点击加号图标,一个空组件就会被创建,在这里可以对该维件进行自定义操作。

[object Object]

添加子版组件

从组件面板中将一个组件拖拽到场景內的画布上,即可创建相应的子版组件。

[object Object]

编辑组件

主控组件

当需要编辑主控组件时,需先进入组件编辑状态,方法为:在组件面板中点击组件或右键点击子版组件并在弹出菜单中选择“编辑主控组件”。

[object Object]

编辑主控组件的操作方与编辑场景相似。在组件中创建、修改或刪除图层、变量、触发、反应等。相关改动会被应用到该组件的所有子版中。

点击左上角的“返回场景编辑”按钮或在场景面板中点击任意场最即可回到场景编辑界面。

[object Object]

子版组件

编辑子版组件中的图层时,只表示该子版组作中的属性被修改,并不会影响到主控组件。此时即便更改了相应的主控组件,子版中被修改的属性值依然得以保留。通过这一方式可以实现对来自于同一个主控组件的不同子版进行不同的自定义操作。

如果希望让某个被修改的子版恢复成和主控统一的属性,只需右键点击该子版组件并在弹出菜单中选择“恢复为主控属性",那么所有已被修改的属性值将会被清除从而使子版回到与主控一致的状态。

[object Object]

Use as Main Component

你可以将子版组件与其所属的主控组件进行关联同步。通过这一选项,不必进入组件编模式,直接在场景中编辑子版组件就可以将编辑结果同步到相应的主控组件上。

[object Object]

修改子版组件中的变量

子版组件中的变量的初始值可以被修改。要修改变量的始值,需在版组件中为相应量开启"可在子版组件中修改”远项。开启后,即可在子版组件的属性面板中修改变量初始值。

[object Object]

Detach Component Instance

分离操作将断开与Component的连接,Instance则将转换为容器。可以在Property Panel或Context Menu执行分离。使用前,请确认是否已在Labs中激活该功能。

在Context Menu分离Component

  1. 右击Instance
  2. 点击Detach Instance
[object Object]

在Property Panel分离Component Instance

  1. 选择Component Instance
  2. 点击Property Panel中的Detach Instance
[object Object]

分离Instance后,Detached_前缀将自动添加到分离的交互名称前。借此可以轻松识别交互是否源于分离的Instance。

[object Object]

组件替换

在右侧的属性面板中可以用一个子版组件替换掉另一个子版组件,嵌套组件的子版也同样可以用这一方法进行替换。

[object Object]

组件编组

在组件名称中使用“/”符号可以对组件进行编组,这样做也有利于对组件进行区分。例如,第一个组件命名为button / primary / normal,第二个组件命名为 button / secondary / normal,即可实现如下图所示的编组效果。

[object Object]
Back To Top