Skip to content

组件属性与组件集

组件属性是一种可以添加到组件或组件集上的可定制参数,与图层属性相关联。组件使用者可以直观地看到组件的哪些部分可以修改,无需深入图层层级就能完成编辑。对于组件库管理者,还能减少需要创建的可变组件数量,降低维护成本,提升文件性能。

游玩指南

可边看边操作的组件属性 Demo:https://mastergo.com/community/resource/81184397198114

组件集

组件集是将多个组件合并为一个可切换的集合。选中多个已创建的组件 → 右键「合并为组件集」(快捷键 Cmd/Ctrl + Option/Alt + I),即可创建。

组件集中的每个组件代表不同的状态(如不同尺寸、颜色或交互状态),通过组件状态属性来切换。例如一个 Button 组件集可能包含 Primary/Secondary × Default/Hover/Disabled 等 6 个状态组合。

属性类型

MasterGo 支持四种组件属性:

属性类型说明示例场景
组件状态在组件集的不同状态之间切换Button 的 Primary/Secondary 风格,Default/Hover/Disabled 交互态
显示状态控制图层可见性的布尔开关控制按钮中的图标是否显示
实例切换在多个嵌套组件实例之间切换切换按钮中的图标(左箭头/右箭头/关闭)
文本内容让实例修改文本内容按钮文字、标签、占位文案

组件状态属性

组件状态基于组件集,是组件集中各个状态组件的集合。使用组件状态属性可以定义组件的交互状态、颜色或尺寸等变化。

  • 只能从组件集父层创建,不能从子图层创建
  • 组件集必须保留至少一个组件状态属性
  • 组件状态属性始终排在右侧属性面板其他属性类型之上

显示状态属性

布尔值属性,用于控制组件内部图层的可见性。值为「开」时显示关联图层,「关」时隐藏。例如:带有可选图标的按钮,不需要为有无图标分别创建组件状态,而是将显示状态属性关联到图标图层的可见性上。

实例切换属性

指定组件中哪些嵌套实例可以被切换。创建时可设置首选值,预选推荐的替换组件,方便团队成员快速找到可选项。

  • 从本地组件或已启用的团队库中选取默认实例
  • 设置了首选值后,在实例切换下拉菜单中优先显示

文本内容属性

指定哪些文本图层可以被编辑。使用时可以从右侧属性面板或直接在画布上修改文本。

注意

文本内容属性不支持富文本(列表样式、上标等)。从属性面板修改文本会删除列表样式,需要从画布编辑以保留格式。

创建组件属性

从子图层创建(推荐)

直接从组件内的子图层创建属性,创建后自动关联到该图层。适用于显示状态、文本内容、实例切换属性。

  • 显示状态:选中子图层 → 右侧「图层」部分 → 点击可见性旁的属性图标 →「创建属性」
  • 文本内容:选中文字子图层 → 右侧「文本内容」部分 → 点击属性图标 →「创建属性」
  • 实例切换:选中嵌套实例 → 右侧「切换实例」下拉菜单旁 → 点击属性图标 →「创建属性」

创建时配置属性名称和默认值,确认即可。

从父层创建

选中组件或组件集 → 右侧属性面板「组件属性」区域 → 点击 + → 选择属性类型 → 配置名称和默认值 → 创建。使用此方法创建的属性,需要手动关联到子图层

组件状态属性只能从父层创建。

关联属性到子图层

从父层创建的属性需手动关联:

  1. 在组件中选中目标子图层
  2. 在右侧属性面板找到对应部分(实例切换 / 文本内容 / 图层可见性)
  3. 点击属性图标 → 从下拉菜单选择已有属性关联
  4. 关联成功后,显示紫色属性标识

管理组件属性

重命名、排序、删除

选中组件或组件集 → 右侧属性面板「组件属性」区域:

  • 重命名:点击属性名称 → 输入新名称 → 回车确认
  • 排序:鼠标悬停显示拖拽手柄 → 拖拽调整。组件状态属性始终排在最前
  • 删除:点击属性右侧删除按钮

管理组件状态的值

选中组件集 → 点击组件状态属性打开编辑模式:

  • 重命名值:点击已有值进行修改
  • 排序值:鼠标悬停拖拽调整顺序

更改默认值

选中组件或组件集 → 点击属性打开编辑弹框 → 修改「默认值」。未手动覆盖的实例会同步更新。

组件状态属性的默认值由组件集左上角的组件决定。

解绑属性

选中关联了属性的子图层 → 点击紫色标识旁的解绑按钮。仅解除关联,不删除属性本身。

组件状态属性无法从子图层解绑。

公开嵌套实例属性

当组件中包含嵌套的其他组件实例时,可以将嵌套实例的属性公开到最外层实例的属性面板中。

  1. 选中组件或组件集 → 右侧「组件属性」→ 点击 +
  2. 选择「从嵌套实例公开已有组件属性」
  3. 在弹框中勾选要公开的嵌套实例属性 → 确认

公开后,在外层实例中可直接修改嵌套实例的属性。点击已公开属性右侧 - 可取消公开。

首选值

为首选值让你为实例切换属性预选推荐的替换组件,减少团队成员在海量组件中查找的时间:

  • 创建或编辑实例切换属性时 → 在弹窗底部找到「首选值」→ 点击添加
  • 浏览或搜索选择组件 → 勾选确认
  • 使用时下拉菜单优先显示首选值列表
  • 点击首选值右侧删除按钮可移除(不删除组件本身)

常见问题

问题解决方法
无法添加属性到组件集子组件组件属性只能添加到组件或组件集父级
组件状态属性无法删除组件集必须保留至少一个组件状态属性
文本修改后格式丢失从画布上编辑文本以保留富文本格式
实例切换找不到目标组件确认目标组件在同一文件内或已订阅的团队库中
切换组件状态后实例位置偏移确保组件集中所有组件尺寸和布局一致