暗色模式
组件属性与组件集
组件属性是一种可以添加到组件或组件集上的可定制参数,与图层属性相关联。组件使用者可以直观地看到组件的哪些部分可以修改,无需深入图层层级就能完成编辑。对于组件库管理者,还能减少需要创建的可变组件数量,降低维护成本,提升文件性能。
游玩指南
可边看边操作的组件属性 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 交互态 |
| 显示状态 | 控制图层可见性的布尔开关 | 控制按钮中的图标是否显示 |
| 实例切换 | 在多个嵌套组件实例之间切换 | 切换按钮中的图标(左箭头/右箭头/关闭) |
| 文本内容 | 让实例修改文本内容 | 按钮文字、标签、占位文案 |
组件状态属性
组件状态基于组件集,是组件集中各个状态组件的集合。使用组件状态属性可以定义组件的交互状态、颜色或尺寸等变化。
- 只能从组件集父层创建,不能从子图层创建
- 组件集必须保留至少一个组件状态属性
- 组件状态属性始终排在右侧属性面板其他属性类型之上
显示状态属性
布尔值属性,用于控制组件内部图层的可见性。值为「开」时显示关联图层,「关」时隐藏。例如:带有可选图标的按钮,不需要为有无图标分别创建组件状态,而是将显示状态属性关联到图标图层的可见性上。
实例切换属性
指定组件中哪些嵌套实例可以被切换。创建时可设置首选值,预选推荐的替换组件,方便团队成员快速找到可选项。
- 从本地组件或已启用的团队库中选取默认实例
- 设置了首选值后,在实例切换下拉菜单中优先显示
文本内容属性
指定哪些文本图层可以被编辑。使用时可以从右侧属性面板或直接在画布上修改文本。
注意
文本内容属性不支持富文本(列表样式、上标等)。从属性面板修改文本会删除列表样式,需要从画布编辑以保留格式。
创建组件属性
从子图层创建(推荐)
直接从组件内的子图层创建属性,创建后自动关联到该图层。适用于显示状态、文本内容、实例切换属性。
- 显示状态:选中子图层 → 右侧「图层」部分 → 点击可见性旁的属性图标 →「创建属性」
- 文本内容:选中文字子图层 → 右侧「文本内容」部分 → 点击属性图标 →「创建属性」
- 实例切换:选中嵌套实例 → 右侧「切换实例」下拉菜单旁 → 点击属性图标 →「创建属性」
创建时配置属性名称和默认值,确认即可。
从父层创建
选中组件或组件集 → 右侧属性面板「组件属性」区域 → 点击 + → 选择属性类型 → 配置名称和默认值 → 创建。使用此方法创建的属性,需要手动关联到子图层。
组件状态属性只能从父层创建。
关联属性到子图层
从父层创建的属性需手动关联:
- 在组件中选中目标子图层
- 在右侧属性面板找到对应部分(实例切换 / 文本内容 / 图层可见性)
- 点击属性图标 → 从下拉菜单选择已有属性关联
- 关联成功后,显示紫色属性标识
管理组件属性
重命名、排序、删除
选中组件或组件集 → 右侧属性面板「组件属性」区域:
- 重命名:点击属性名称 → 输入新名称 → 回车确认
- 排序:鼠标悬停显示拖拽手柄 → 拖拽调整。组件状态属性始终排在最前
- 删除:点击属性右侧删除按钮
管理组件状态的值
选中组件集 → 点击组件状态属性打开编辑模式:
- 重命名值:点击已有值进行修改
- 排序值:鼠标悬停拖拽调整顺序
更改默认值
选中组件或组件集 → 点击属性打开编辑弹框 → 修改「默认值」。未手动覆盖的实例会同步更新。
组件状态属性的默认值由组件集左上角的组件决定。
解绑属性
选中关联了属性的子图层 → 点击紫色标识旁的解绑按钮。仅解除关联,不删除属性本身。
组件状态属性无法从子图层解绑。
公开嵌套实例属性
当组件中包含嵌套的其他组件实例时,可以将嵌套实例的属性公开到最外层实例的属性面板中。
- 选中组件或组件集 → 右侧「组件属性」→ 点击 +
- 选择「从嵌套实例公开已有组件属性」
- 在弹框中勾选要公开的嵌套实例属性 → 确认
公开后,在外层实例中可直接修改嵌套实例的属性。点击已公开属性右侧 - 可取消公开。
首选值
为首选值让你为实例切换属性预选推荐的替换组件,减少团队成员在海量组件中查找的时间:
- 创建或编辑实例切换属性时 → 在弹窗底部找到「首选值」→ 点击添加
- 浏览或搜索选择组件 → 勾选确认
- 使用时下拉菜单优先显示首选值列表
- 点击首选值右侧删除按钮可移除(不删除组件本身)
常见问题
| 问题 | 解决方法 |
|---|---|
| 无法添加属性到组件集子组件 | 组件属性只能添加到组件或组件集父级 |
| 组件状态属性无法删除 | 组件集必须保留至少一个组件状态属性 |
| 文本修改后格式丢失 | 从画布上编辑文本以保留富文本格式 |
| 实例切换找不到目标组件 | 确认目标组件在同一文件内或已订阅的团队库中 |
| 切换组件状态后实例位置偏移 | 确保组件集中所有组件尺寸和布局一致 |