交互组件库
交互组件库本质上是ProtoPie Cloud中所具有的组件的集合,它可以使你和你的团队成员方便快捷地在原型中使用子版组件。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/5c73d2eee43caa6bf79463e130be3aa65e73e5ee-2175x1269.png/interaction-libraries.png)
交互组件库分为三类:团队组件库、个人组件库,以及公共组件库。
- 团队组件库(团队版和企业版):团队中的任何编辑者均可创建团队组件库并邀请其他编辑者对团队组件库进行编辑。团队中的所有成员均可使用团队组件库中的组件。
- 个人组件库(所有版本):用户可在云端的个人空间(Personal Space)中创建个人组件库,个人组件库中的组件仅供用户本人使用。
- 公共组件库(所有版本):用户可以使用公共组件库中的任何组件,公共组件库是作为标准库向公众提供组件的,例如Material Design以及iOS交互组件库就是公共组件库。
创建交互组件库
点击组件面板中书架图标分组栏右侧的+按钮可以创建新的组件库,输入组件库名称及描述(非必填)后点击创建按钮,组件库即被创建。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/05adbe1ac1779e0220bd13d89574613127d6ec21-875x749.png/interaction-libraries.png)
组件库被创建后将会打开一个新的组件窗口,同时在组件面板中可以看到当前正在编辑的交互组件库被标记为“正在编辑”。此时顶部的紫色标题栏会提示用户正处于编辑组件库模式中。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f5368ac806460a1aad49c9a868d1699282311f67-2004x1106.png/Interaction-Edit.png)
发布交互组件库
只有将变更发布到云端后,你和/或你团队中的其他成员才能使用到最新版本的相应组件。首先保存对组件做出的变更,然后点击紫色标题栏右侧的发布按钮或点击ProtoPie Studio右上角的发布按钮即可发布。
如果是发布到团队组件库,则团队内任意具有编辑者身份的成员均可将这些组件用在他的原型中。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/a279198dcea1ffdde7515681542b9606a8750ca8-1450x800.png/publish.png)
添加组件示例
从组件面板内的任意交互组件库中将任一组件拖放到场景中的画布上可以创建出相应的子版组件。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/d34c10967aa737c350d472f914aca413d198c73a-1450x800.png/adding_component_instances.png)
更新交互组件库
当原型中某个子版组件对应的组件母版所隶属的组件库被更新后,更新组件库图标上会出现通知提示,同时在更新组件库窗口中可以选择对哪一个交互组件库进行更新。点击右上角的刷新图标进行手动刷新可以检查是否存在尚未更新的组件库。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/3060769106d48b6ce5c82b5d0bde5bc8ea05aa7c-1068x586.png/updating-interaction-libaries.png)
导出为新的交互组件
在创建组件库时不必每次都创建空的组件库再把组件添加进来。点击文件并选择导出为新的组件库即可将PIE文件中的本地组件打包成新的组件库。通过这种方式可以一次性地将一个Pie中所有的组件创建到一个组件库中。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/892a3df917d68bec80abc9e127993965ec9b1696-1450x800.png/export_as_new_library.png)
导入组件库
将本地组件添加到组件库
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/cbef9d760d475cc0882af9b1d17ff29e6576b462-1202x694.png/Export-to-library-1.png)
本地组件可被添加到已有的组件库中。首先点击本地组件栏右上角的导出到组件库。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/e468bb86017d0d8052e0b8edd48b0c8bf15c20b9-1732x1270.png/Export-to-library-2.png)
在弹出窗口左边选择要导出(即要添加到组件库)的本地组件,然后在右边选择相应的目标组件库并点击导出按钮,即可将本地组件添加到组件库中。如在点击导出按钮前勾选组件库选择框下方的选项,则可将本地组件添加到组件库的同时对已经更新的组件库进行发布。
搜索和筛选库
现在,你可以通过库设置窗口中的下拉菜单搜索特定的库,并选择在面板中显示哪些库。此增强功能可以帮助你轻松定位并专注于所需的库。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/8b898cbb34a8652cb5d302211a91c3b5d8fa01ce-1874x1342.png/Filter-Libaries-1.png)
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/4ff01301382561e204ee54f7bac4fdcc00cf7850-1440x1494.png/Filter-Libraries-2.png)
冲突处理
仅针对团队组件库:
在对交互组件库进行编辑的过程中,如果其他用户也对组件做出变更并发布到同一组件库,你将会看到一条警告信息,然后你可以根据自身情形选择:
- 用你的版本覆盖掉其他人的版本,这样你的版本将作为最新版更新到团队。
- 放弃当前修改内容并更新到相应组件库的最新版本。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/0c03e1a69987075a755823da294947ea3179b18c-1580x870.png/image.png)