@ 桥接- ds/ 反应
大桥设计系统的回放组件. 行为来自Base UI(焦点,键盘,ARIA);造型是
只有符号的 CSS, 所以每个组件都遵循由 @bridge-ds/tokens。 。 。 .
npm i @bridge-ds/react @bridge-ds/tokens
import '@bridge-ds/tokens/fonts.css';
import '@bridge-ds/tokens/tokens.css';
import '@bridge-ds/react/styles.css';
import { Button, ThemeProvider } from '@bridge-ds/react';
export function App() {
return (
<ThemeProvider asRoot theme="light" brand="bridge" density="comfortable">
<Button>Save changes</Button>
</ThemeProvider>
);
}
@bridge-ds/react/styles.css 拥有全球基础和每个组件的风格。 之后导入一次
符号CSS。 同伴依赖性 : react 财务报告和审定财务报表 react-dom 18岁或以后.
无反应的页面
静态站点、服务器模板和用普通脚本构建行的页面 @bridge-ds/react/dom每一个
渲染器返回其 React 组件的精确标记,具有相同的 CSS 模块类( 从同一
样式表),所以其外观和行为都是一样的. 对等测试将每个渲染器与其组件进行比较.
import { badgeHtml, bindCodeBlocks, bindTooltips, codeBlockHtml, tooltipAttributes } from '@bridge-ds/react/dom';
row.innerHTML = badgeHtml('Approved', { tone: 'success', attributes: tooltipAttributes('Approved by the design owner', { focusable: true }) });
panel.innerHTML = codeBlockHtml('npm i @bridge-ds/react', { label: 'Install' });
bindTooltips(); // once per page: every [data-tooltip] element, now or later
bindCodeBlocks(); // once per page: copy buttons of CodeBlocks rendered without hydration
page.insertAdjacentHTML('beforeend', dialogHtml({ id: 'new-token', title: 'New token', body: trusted(fields), footer: trusted(actions) }));
bindDialogs(); // [data-dialog-open="new-token"] opens it, [data-dialog-close] and Escape close it
openDialog('new-token'); // or from a script; closeDialog(id, value) and the root's `close` event mirror <dialog>
渲染者 : badgeHtml, (中文(简体) ), badgeClassName, (中文(简体) ), codeBlockHtml, (中文(简体) ), tokenValueHtml, (中文(简体) ), checklistHtml, (中文(简体) ), checklistRowHtml, (中文(简体) ),
dialogHtml。“对话框”行为类似“反应” :焦点移动和被困入,后面的页面是惰性的,而且确实
不滚动, 越狱和斜线关闭, 焦点返回触发器; a <form method="dialog"> 里面关上它
以按钮的值提交时( x)dialogReturnValue) (中文(简体) ).
文本被逃脱; 通过 trusted(html) 为了加价,你建立和逃脱了自己. bridge audit 这些电话计为
设计系统组件,并计算脚本所建标记中的自制外观(class="pill", (中文(简体) ), data-tip
• 禁止收养。 您的捆绑器必须处理从软件包导入的 CSS 模块( Vite, Astro and Next)
),或导入 @bridge-ds/react/styles.css 并使用已公布的建筑.
运行时尝试一个设计系统分支
安装分支快照(参见 PR 注释 “ 在您的产品中尝试此 DS 分支”) , 或预览分支的符号
不重排: 通过 tokenOverride 改为 ThemeProvider ,然后打开中继器
?bridge-tokens=<url-to-tokens.css>。默认关闭,除非您选择加入,否则在生产中被拒绝。 读取
安全说明 docs/PREVIEWS.md 在启用之前先使用存储器.
麻省理工学院执照.