# @bridge-ds/react 中文文档
规范地址：https://npmcn.com/package/%40bridge-ds/react/
版本：1\.8\.5
npm 元数据更新时间：2026-11-08T02:36:11.394Z
中文译文更新时间：2026-11-08T15:47:37.584Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bridge-ds/react
原文对照：https://npmcn.com/package/%40bridge-ds/react/?lang=original
项目主页：https://github.com/the-bridge-company/ai-design-system-demo/tree/main/packages/react#readme
源码仓库：https://github.com/the-bridge-company/ai-design-system-demo
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：821 kB，138 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-10-17T19:43:44.202Z
- 最新版本发布：2026-11-08T02:36:11.063Z
- 近 30 天下载量：1796（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）
## 中文简介
Bridge设计系统 React 组件: Base UI行为,通过 CSS Module 仅以符号为样式.
## 安装
```sh
npm install @bridge-ds/react
```
也可以使用：`pnpm add @bridge-ds/react`、`yarn add @bridge-ds/react`、`bun add @bridge-ds/react`
## README
# @ 桥接- ds/ 反应
大桥设计系统的回放组件. 行为来自Base UI(焦点,键盘,ARIA);造型是 只有符号的 CSS, 所以每个组件都遵循由 `@bridge-ds/tokens`。 。 。 .
```sh
npm i @bridge-ds/react @bridge-ds/tokens
```
```tsx
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 (
);
}
```
`@bridge-ds/react/styles.css` 拥有全球基础和每个组件的风格。 之后导入一次 符号CSS。 同伴依赖性 : `react` 财务报告和审定财务报表 `react-dom` 18岁或以后.
## 无反应的页面
静态站点、服务器模板和用普通脚本构建行的页面 `@bridge-ds/react/dom`每一个 渲染器返回其 React 组件的精确标记,具有相同的 CSS 模块类( 从同一 样式表),所以其外观和行为都是一样的. 对等测试将每个渲染器与其组件进行比较.
```ts
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