使用组件属性提高效率
做好一个组件之后，设计师怎么用它？要让设计师不用点进图层、不会改错地方，最关键的一步是给组件加上组件属性。
为什么需要组件属性
想象你做了一个按钮组件，里面有文字，有图标，还可以选择是否显示加载状态。如果不做特殊处理，使用你组件的设计师每次想改东西都得费一番周折： 想改按钮文字，要双击进去找到那个文本图层；想把图标隐藏，要点开图层列表找到图标图层，再切换它的可见性；想换一个图标，要点进按钮内部找到图标实例，再用实例切换功能……一通操作下来又繁琐又容易出错。
组件属性的作用，就是把这些常用的修改项提到外面。使用者选中实例后，右侧面板直接就能改文字、切换显隐、换图标，不用再深入图层里去找。
四种组件属性
Ardot 提供四种组件属性，对应不同的修改场景。
| 类型 | 用来控制什么 | 典型场景 |
|---|---|---|
| 文本属性 | 文本内容 | 按钮文案、卡片标题 |
| 布尔属性 | 显示或隐藏某个图层 | 是否显示图标、是否显示徽标 |
| 实例切换属性 | 嵌套的子组件要换成哪一个 | 切换图标、切换头像 |
| 暴露嵌套实例属性 | 把内层组件的属性提到外层 | 让使用者不用点进 Card 就能改 Card 内部 Button 的文案 |
下面分别介绍每种属性怎么用。
共同的前提：先选中组件自身
无论你想创建哪种组件属性，操作之前都要先选中组件自身的最外层。不是组件内的某个子图层，也不是组件集中的某个变体，而是组件本身。如果是组件集就选中组件集。
选中后，右侧属性面板会出现组件属性区域。
文本属性：让按钮文案可以一键修改
文本属性用来控制文本图层的内容。比如按钮组件里的文案、卡片组件里的标题，都适合做成文本属性。
创建文本属性
推荐从文本图层直接创建，省去手动关联的步骤。
- 在组件内选中文本图层
- 在右侧面板的文本内容旁，点击关联变量/属性按钮
- 在弹出的菜单中点击 + 号，新建组件属性
- 输入属性名（默认 Text + 数字）
- 默认值会自动用当前文本的内容
- 点击创建即完成创建与关联
也可以先建属性再关联
如果你想先把所有属性都规划好再绑定图层，也可以反过来操作。
先选中组件自身层，在组件属性区域点击 + 号，选择文本属性，填好名称和默认值。这种方式创建的属性还没绑到任何图层上，需要手动关联。
关联的方法和上面的步骤 2 类似：选中组件内的文本图层，点击文本内容旁的关联按钮，从列表里选已经创建好的属性即可。
怎么知道关联好了
绑定成功后，文本图层的属性旁会显示一个紫色的属性标签。这是已绑定的标识。
布尔属性：让图标可以一键显隐
布尔属性用来控制某个图层的显示和隐藏。比如按钮组件里有一个加载图标，平时不显示，加载状态下显示。把这个图层的可见性绑定到一个布尔属性上，使用者就能在实例面板上一键切换。
创建布尔属性
- 选中你想控制显隐的图层
- 在右侧面板图层区域，眼睛图标旁点击关联变量/属性按钮
- 在弹出的菜单中点击 + 号，新建布尔属性
- 名称默认是 Show 加图层名
- 默认值会自动用当前图层的显隐状态
- 创建后自动绑定
先建属性再关联
同样可以先创建属性。选中组件自身层，在组件属性区域点击 + 号，选择布尔属性，填好名称和默认值（真或假）。
之后选中要控制的图层，点击图层眼睛图标旁的关联按钮，选择已有的布尔属性即可。
一个属性可以控制多个图层
一个布尔属性可以同时绑到多个图层上，让它们一起显隐。比如按钮组件里有"前置图标"和"图标背景"两个图层，可以都绑到同一个布尔属性上，一起显示一起隐藏。
实例切换属性：让用户能换图标、换头像
实例切换属性用来让嵌套的子组件可以被替换成另一个组件。比如卡片组件里嵌套了一个头像组件，使用者可以通过这个属性把头像换成其他形状或样式。
创建实例切换属性
- 选中组件内嵌套的实例（必须是组件直接嵌套的实例，不能是再下一层）
- 在实例切换下拉旁，点击对应按钮
- 如果组件内已经有实例切换属性，可以从列表选已有的，或者新建一个
- 如果还没有，会直接打开新建弹框
- 默认值用的是当前实例
- 创建后自动绑定
先建属性再关联
选中组件自身层，在组件属性区域点击 + 号，选择实例切换属性，给属性起名，默认是 Instance 加数字，再选一个默认要显示的组件。
之后选中嵌套实例，在实例切换下拉旁点击关联按钮，选择已有属性即可。
关于嵌套层级
要绑定的实例必须是组件直接嵌套的实例。如果实例里还有实例，下一层的实例不能直接绑定到当前组件的属性上。如果你想暴露更深层的内容，看下一节"暴露嵌套实例属性"。
暴露嵌套实例属性：让使用更省事
什么场景需要
假设你做了一张 Card 组件，里面嵌套了一个 Button 实例。Button 有自己的"按钮文案"属性。
默认情况下，使用 Card 的设计师想改按钮文案，需要先选中 Card 实例，双击点进去，选中里面的 Button 实例，再在 Button 的属性面板里改文案。
暴露嵌套实例属性可以把这一切简化。选中 Card 实例，直接在 Card 的属性面板上就能看到 Button 的所有属性，一键修改。
操作步骤
- 选中组件自身层
- 点击组件属性区域的 + 号
- 在菜单底部选择嵌套实例
- 勾选你想要暴露的嵌套实例
- 勾选后即生效
暴露出来叫什么名字
暴露的属性会用嵌套实例在图层列表中的图层名，不是它原本的组件名。
举个例子，Button 组件里有一个图标，组件名叫 up，但你在 Card 组件中把这个图标的图层名改成了 icon。那暴露出来显示的就是 icon。
多重嵌套时，名字由上一级主组件中对应的图层名决定。
多层嵌套只需要勾一次
如果 Card 里嵌套了 Button，Button 里又嵌套了 Icon，你只需要在 Card 上勾选 Button 这一级。
暴露后，Card 实例的属性面板会以平铺方式显示所有层级的属性，Button 自己的属性、Button 内部 Icon 的属性都列在一起，使用者不用一层层点进去。
鼠标悬停高亮
悬停在暴露的属性上，画布中对应的嵌套实例会高亮，方便你找到它的位置。
复制行为
复制带暴露属性的实例，副本会保留这些暴露属性，行为和普通组件属性一致。
管理你的组件属性
没用上的属性会有提示
如果你创建了一个属性但忘了关联任何图层，会在它右侧看到提示。没关联图层的属性不会出现在实例面板上，请记得去关联。
编辑属性
点击属性标签，可以修改名称和默认值。修改是实时同步的，所有用到这个属性的图层和实例都会跟着更新。
删除属性
点属性标签右侧的删除按钮。删除后，原来绑定的图层会自动解除关联，图层本身不会被删，只是失去和这个属性的关系。
排序
属性的排序会影响实例面板中属性的显示顺序，把最常改的属性放前面，能让使用者用得更顺手。变体属性和其他属性是分开排序的（两个区域），拖拽属性条排序。多选拖动按 Command 逐个选中，或 Shift 选范围。
找出哪些图层用了某个属性
鼠标悬停在属性标签上，画布上所有绑定这个属性的图层都会高亮，方便你做检查。
解除关联
如果某个图层不再需要绑定属性，点紫色属性标签右侧的解绑按钮，关系就解除了。图层本身保留，只是不再和属性挂钩。
更换关联
如果想改成绑另一个属性，点紫色标签，重新选一个就行。
在实例上用组件属性
选中实例就能改
选中实例后，右侧面板会显示所有组件属性，直接操作就行。
- 文本属性：在输入框里改文字
- 布尔属性：切换开关
- 实例切换属性：从下拉选别的组件
- 暴露的嵌套实例属性：直接操作内层实例的所有属性，包括切换变体
选中绑定了属性的图层时
如果你选中的不是实例自身，而是实例内部某个绑定了组件属性的图层，这个图层的原本属性会被接管，不能在这里直接改。取而代之的是一个前往属性按钮，点一下跳到实例自身层去改。图层列表里仍然可以控制显隐，这点不受影响。
什么时候属性会自动隐藏
有些情况下，组件属性不会在实例面板里显示出来。
一种情况是绑定该属性的图层全都被隐藏了。属性对应的图层都看不见了，自然也没必要显示属性。
另一种情况是当前变体里没有关联该属性的图层。比如属性只绑定在主要按钮变体上，那次要按钮变体的实例就不会显示这个属性。
这是为了避免用户看到没有意义的选项。