@starcier / collab-ui
Starcier协作层的视觉部分:将评论钉在页面上 注释抽屉,导览和工作流选择器。它在任何地方看起来和表现都是一样的 建造者,不管建造者自己的设计系统是什么。
大多数构建器不直接使用这个包。 @starcier/builder-shell 帮你装上。
只有当你的应用有自己的外壳时,你才可以自己去使用它;它需要React,但不需要路由器。
安装
npm install @starcier/collab-core@next @starcier/collab-ui@next
直到 1.0.0 已发布,版本为预发布(1.0.0-next.N):总是安装
@next. 没有它,npm会安装第一个预发布版,而不是最新的。需要React 18或19;
和 @starcier/collab-core,其中保存了数据。
使用
山 CollabUiProvider 内部 CollabProvider,周围的一切渲染
协作组件:
import { CollabProvider } from '@starcier/collab-core';
import { CollabUiProvider } from '@starcier/collab-ui';
<CollabProvider apiBaseUrl={API_BASE_URL} getToken={getAccessToken} tenant={TENANT_SLUG}>
<CollabUiProvider
overlaySelectors={['.my-modal', '.my-drawer']} // your design system's overlay roots
fieldWrapperSelectors={['.my-field']} // wrappers around your form fields
>
{children}
</CollabUiProvider>
</CollabProvider>
两个选择器列表都是可选的。他们保持记录的旅游步骤稳定,包括开放的旅游 一个对话框。
不能查看对话。 查看模式永远不会在匹配的元素中放置注释
overlaySelectors;点击这里到达对话框。评论显示在页面上。
堆垛顺序
协作层在两者之间进行划分 z-index 9140(回顾重点)和10000(参观)
工具提示)。请将您自己的情态、抽屉和弹出窗口保存在9140下方,以便随时发表评论和参观
出现在他们之上。
协作层使用自己的固定颜色和系统字体,所以它读起来像一个工具
是你产品的顶部,而不是一部分。这个 BuilderPalette 导出的类型是
建筑商的合同 铬 -目录和登录页面-其中
@starcier/builder-shell 从您的设计标记中提取。
许可证
麻省理工学院