Widgets(元件)的属性 #

样式属性 #

你可以编辑以下属性来定制你的 Widgets(元件)的样式。你可以在 Style(样式) 面板或画布顶部的样式工具栏中更改这些属性。

Opacity(不透明度) #

使用滑块或输入框来设置目标 Widgets(元件)的整体不透明度。

Typography(文字排版) #

字体设置选项 :设置字体、字号、字重和字体颜色。

注意

如果你使用了字体选择器中 Local(本地) 标签下的字体,请参阅网页字体参考参考线 (opens new window) ,了解如何在你发布原型时保留这些字体。

行距 :调整文本行之间的间距。你可以设置一个特定的像素值,或者使用 Auto 来使用默认的间距。

字间距 :调整 Widgets(元件)文本中单个字符之间的间距。你可以设置一个特定的值(以十分之一的像素为单位),或者选择 “0” 来使用默认的间距。

其他文本选项 该菜单包括以下选项:

  • 列表,加粗,斜体,下划线, 和删除线

  • Baseline(基线) 将所选文本的基线向上或向下移动。可以选择 Normal(正常)Superscript(上标)Subscript(下标)

  • Letter Case(字符格式) 将所选文本中所有字符的大小写进行转转换。可以选择 Normal(正常)Uppercase(大写字母)Lowercase(小写字母)

  • 文字阴影。 给 Widgets(元件)文本中的每个字符添加一个阴影。

  • 对齐 七个对齐选项控制 Widgets(元件)的文本在其边界内的对齐方式。你可以控制水平和垂直对齐等。

Fill(填充) #

颜色 :设置一个 Widgets(元件)的填充颜色。Widgets(元件)的填充颜色可以是纯色,也可以是线性或径向渐变。

图片 :设置一个图片填充 ,以及图片的填充方式。填充图像 (opens new window)

描边 #

颜色 :设置元件的 Border(描边)的颜色和不透明度。线条的颜色可以是纯色的,也可以是线性或径向的渐变。

宽度 设置元件的 Border(描边)宽度。

模式 设置一个Widgets(元件)的 Border(描边)模式。

可见性 控制矩形元件的哪些边显示边界。

箭头 在一端或两端添加箭头。

阴影 #

给选定的 Widgets(元件)添加外阴影或内阴影。你可以控制阴影的 X 和 Y 偏移量、模糊度和颜色。对于内部阴影,你也可以控制阴影的扩展值。

圆角 #

使用输入框来更改矩形 Widgets(元件)的圆角值。(你也可以通过在画布上选择 Widgets(元件)并拖动其左上角的三角形来更改圆角值。)

要分别控制圆角,请点击 Set Corner Radius(设置转角半径) 图标。

内边距 #

内边距决定了一个元件的文本和到四个边之间的最小空间,单位是像素。

元件样式 #

元件样式是可重复使用的、集中管理的属性集。你可以将一个 元件样式应用于多个 Widgets(元件),以便统一它们的样式。如果你改变了元件样式中的一个属性,这个改变将被应用到所有使用该样式的 Widgets(元件)。

要对一个或多个 Widgets(元件)应用 元件样式,选择 Widgets(元件),然后在Style(样式) 面板或样式工具栏的 元件样式下拉菜单中选择 元件样式。

你可以通过进入 Project(项目) → Widget Style Manager(元件样式管理器) ,或在Style(样式) 面板或样式工具栏中点击 元件样式下拉旁边的 Manage Widget Styles 图标来查看和管理原型中的 元件样式。

元件样式的顺序结构 #

每个Widgets(元件)的视觉外观是由以下样式属性选择决定的,它们会按照从高到低的顺序排列应用。

  1. Style(样式) 面板或样式工具栏中对 Widgets(元件)本身进行的属性更改会覆盖默认样式 和 Widgets(元件)应用的元件样式。

  2. 该 Widgets(元件)应用的元件样式。

  3. 元件样式管理器 对话框顶部的 默认情况下 样式,其样式属性选择将应用于原型中的每个元件。

注意

当一个 Widgets(元件)的样式属性选择与它的元件样式不同时,在 Style(样式) 面板和样式工具栏中,Widgets(元件)的样式名称后面会有一个星号。

元件样式管理器 #

点击 管理元件样式 图标,在 Style(样式) 面板或样式工具栏的元件样式下拉菜单旁边,打开 元件样式管理器 。你也可以通过 项目 → 元件样式管理器 来打开管理器。

要添加一个新的样式,请在对话框的顶部点击 Add 添加 。或者,你可以点击Duplicate 复制 ,从一个现有的样式复制出一个新样式。

要删除一个样式,选择它并点击 Delete 删除 。使用Up 上Down下 箭头来重新排序对话框中的样式。

要编辑一个元件样式的样式属性,在左栏中选择它。在右栏中,选中一个样式属性旁边的方框然后更改属性即可。

你也可以一次编辑多个样式。按住 CTRL 或 CMD,同时在左栏中选择样式,然后在右栏中进行修改。

团队项目中的样式 #

团队项目 (opens new window) 中的样式可以被编辑。要将样式更新推送到所有团队项目中,请通过 Team 团队 → Send Changes to Team Directory 发送更改到团队目录 来推送更新。

复制和粘贴样式 #

你可以复制一个Widgets(元件)的样式,并将其粘贴到另一个Widgets(元件):

  1. 复制第一个 Widgets(元件)。
  2. 右键单击第二个 Widgets(元件)。
  3. 选择 Paste Special 特殊粘贴 → Paste Style 粘贴样式

第二个Widgets(元件)将接受第一个Widgets(元件)的所有样式属性,包括其应用的元件样式 (opens new window)

格式刷 #

Edit 编辑 → Format Painter 格式刷 中找到格式刷。

你可以选择哪些单独的属性来复制和粘贴,而且你可以一次粘贴到多个Widgets(元件)上。

样式交互效果 #

“样式交互效果” 是基于浏览器中的交互而动态应用的元件样式。只要 Widgets(元件)处于某种状态,如被鼠标移过或禁用,它们就会将 Widgets(元件)的样式从其基本样式改变为另一种样式。

要了解更多信息,请查看样式交互效果》一文 (opens new window)