组件资源
组件是可重复使用的设计元素,它可以是按钮、图标、输入框等各种界面元素也可以是更复杂的组合,如导航栏、卡片等。组件由主组件和实例组成。主组件是定义组件属性和样式的源头,而实例是主组件的副本,可以在不同的页面和框架中重复使用。本节将详细为大家介绍组件资源的用法。
覆盖层
覆盖层指在实例上修改了属性后 ,对应属性不再跟随源组件进行更新,并且在实例发生替换时,可以根据规则进行继承。
组件实例可以自定义一些属性,包括不限于:
-
图层名称
-
圆角
-
圆环、多边形、星形参数
-
图层显示/隐藏、不透明度
-
填充
-
描边
-
效果
-
文本、文字样式
-
自动布局
-
交互数据
覆盖层继承
从A组件替换为B组件时,可自动继承相关覆盖层,其规则主要依据图层的层级关系、图层的类型、图层名称来进行匹配。
比如A组件中有一个矩形图层,图层名为矩形1,B组件中也有一个矩形图层,图层名为矩形1 在A组件实例上修改了矩形1的颜色,当从A组件替换为B组件时,可自动继承修改后的颜色。
图层类型分为以下几类:
-
容器类型,包括:实例容器/普通容器/编组;
-
矢量类型,包括:矩形、圆、多边形、星形、钢笔路径、布尔运算组;
-
文本类型,包括:文本图层;
-
输入内容,包括:输入框;
同组件切换状态覆盖层继承
同一个组件中,切换不同状态时,覆盖层继承更智能,需要判断匹配图层在源组件中的样式是否一致,样式一致才能继承对应的覆盖层。
组件封装
组件封装是将一组相关的设计元素组合成一个可重复使用的单元,并对其进行管理和维护的过程。在 M3 中,组件可以是按钮、图标、输入框等界面元素,通过封装组件,可以将其属性和行为进行统一管理,使得在不同的设计场景中都能保持一致的外观和功能。
1.创建主组件
选择要封装的设计元素,然后点击 "创建组件" 按钮。这将创建一个主组件,它是所有实例的源头。
为主组件命名,并设置其属性和样式。确保主组件具有清晰的命名和结构,以便于识别和使用。
2.定义组件属性
根据组件的需求,定义其属性。例如,对于按钮组件,可以定义颜色、文本、尺寸、圆角等属性,以及点击、悬停等交互效果。属性可以通过属性面板进行设置,并且可以在实例中进行调整。
3.组织组件
将封装好的组件组织到组件面板中,可以创建组件集或文件夹来分类管理组件。