@ bridge-ds/tool栏
用"桥"设计系统所建产品的"桥"工具箱. Bridge Studio 打开产品
?bridge=<change> ("在产品中尝试");工具栏让任何人浏览真正的产品,然后在产品之间翻转
活性产品 (以前)和 这个变化 (之后),与 显示变化。 。 。 .
-
代码更改 (在产品存储处的探索,一个特征分支): 之前的产品在 生产, 后面是分支的预览. 翻转保持屏幕和滚动位置。 生产是另一个 源代码,所以工具栏无法测量差异: 更改标记UI的每个新区域或已更改区域
data-bridge-change="<short plain label>"在最外层的元素(布里奇在每次探索中告诉克洛德). 在这个变化中,这些区域被概括,计算("1已改变","1/3已改变"),并像符号一样走过 更改,带有孤立,更改则列出名称。 在Live产品上,酒吧说有多少人等待这个变化 ("一于此变"有变. 改变什么也没有说.<div role="status" data-bridge-change="Orders waiting to ship alert">30 orders are waiting to ship</div> -
输入更改 设计系统:活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的活的 工具栏一打开, 每个不同的表面都会被勾画出并在栏中被计算("13已更改",再"2/13已更改"). 上个和下个滚动 以读取为序并勾画出比其他的更坚固;隔绝使其余的页面变暗(Esc将其关闭)。 这个 轮廓,在翻到 Live 产品时,位置和孤立控制,因为两边是同一页.
键盘 : 页:1 翻转 Live 产品 和 此更改在同一屏幕和滚动位置, C级 转动轮廓 不停地, 英格兰 结束孤立。 你打字的时候,他们都不开火.
无 ?bridge= (或记起它的会话)它使无所事事和负载无所事事:工具栏及其样式
是个懒汉.
工具栏是Bridge的铬,任何产品上看起来都是一样的,无论它的设计系统,标志或全球CSS:
它的块承载着它所制造的桥构件(他们自己的类别名称, bridge-tb_*和桥牌
值,范围为工具栏本身的元素。 它从不为自己的外观读出页面的标志.
上马
npm i @bridge-ds/toolbar
应用程序根部的一行 设计系统内部 ThemeProvider数字 :
import { BridgeToolbar } from '@bridge-ds/toolbar';
<BridgeToolbar ds="acme/design-system" product="checkout" />
ds 是设计系统存储器,并且 product 产品的关键所在 bridge.config.json products[]时
工作室打开页面,工具栏读取了来自 GitHub 的配置,每次会话一次:产品存储器(其中其存储器)
勘探是牵引请求, production (在代码更改之前), preview (分支预览模板
只允许主机移交制作)和制作工作室(previews.production.docs回来的路和
(原始内容存档于2018-10-21). live sorms. bridge connect 以您的数值打印此行.
{ "key": "checkout", "name": "Checkout", "repo": "acme/checkout", "framework": "react",
"preview": "https://checkout-git-{branch}-acme.vercel.app", "production": "https://checkout.acme.com" }
选项
| Prop | 它会做什么 |
|---|---|
studio, (中文(简体) ), production, (中文(简体) ), preview | 覆盖配置所描述的内容( 例如像以前一样的 URL) . |
deployEnv | "production" 或者说 "preview" 当你的建筑知道它的时候 VERCEL_ENV),可选:在其他主机上(Cloudflare Pages,Netlify),一个主机匹配预览模板的页面算作预览. |
build | 每个事实一次,在建设时间读出:在运行时间不读出配置. |
scope | 钩子回来了 { theme, brand, density, shop, set } 当您的应用保持主题和商店状态。 默认: data-theme, (中文(简体) ), data-brand 财务报告和审定财务报表 data-density 属性 ThemeProvider asRoot 打开 <html>。 。 。 . |
shops | { id, name, brand }[] ,用于屏幕列表和“切换到”. |
together | 最新库符号文件的加载器( U)togetherBase 从 @bridge-ds/toolbar/together),所以工作室的"一起尝试他们"运行在你的出品上. |
proxy | Bridge的出处,它的读取代理服务工具栏的GitHub读取. 默认 https://bridge.floriangouloubi.com· ; null 直接读取 GitHub. |
读取通过 Bridge 的读取代理(<proxy>/api/contribute?repo=<ds>&gh=<path>: 允许列表、缓存、只读
在服务器上),所以访客从来没有遇到GitHub的60个匿名读取一小时的限制. 桥梁为公共设计服务
系统及其公共产品储存库 bridge.config.json 列表,以定义名称的来源
(单位:千美元)production 财务报告和审定财务报表 preview 每个产品,和本地主机。 当桥拒绝或无法到达时,工具栏
直接读取 GitHub( 匿名, 公共寄存器): 最多有少数API 读取每个更改和会话 .