# @bloom-housing/ui-components 中文文档

规范地址：https://npmcn.com/package/%40bloom-housing/ui-components/

版本：14\.1\.1
npm 元数据更新时间：2026-09-17T22:36:34.971Z
中文译文更新时间：2026-11-08T07:50:34.886Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bloom-housing/ui-components
原文对照：https://npmcn.com/package/%40bloom-housing/ui-components/?lang=original
项目主页：https://github.com/bloom-housing/ui-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.7 MB，1348 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：27 个
- 首次发布：2020-03-08T21:39:18.324Z
- 最新版本发布：2026-09-17T22:36:34.798Z
- 近 30 天下载量：2930（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：508（近 12 个月 13 个）

## 中文简介

Bloom经济适用住房系统共享用户界面组件

## 安装

```sh
npm install @bloom-housing/ui-components
```

也可以使用：`pnpm add @bloom-housing/ui-components`、`yarn add @bloom-housing/ui-components`、`bun add @bloom-housing/ui-components`

## README

# Bloom UI 组件

这个软件包包含了由Bloom经济适用住房系统使用的组件库.

## 地点/翻译

`src/locales` 包含 JSON 文件, 包含我们所有软件包中所用的翻译密钥和副本 .

## 故事书

UIC 用途 [故事书](https://storybook.js.org/) 来记录我们的组件, 并审查它是最好的 开始和了解什么是可用的。 你可以看我们出版的故事书 [这里](https://storybook.bloom.exygy.dev/)。 。 。 .

从根起

```
yarn start
```

## 测试

要运行用 Jest 和 RTL 构建的单元测试套件, 从 root 运行 :

```
yarn test
```

或者说

```
yarn test:coverage
```

报告当地情况.

要运行我们的无障碍套件 利用故事本,从根运行:

```
yarn test:a11y
```

## 捐款

欢迎向伊斯兰法院联盟提供捐助。 为了帮助我们实现项目在质量和可维持性方面的目标,我们要求所有捐助者阅读、理解并同意我们的指导方针.

### 问题跟踪

我们的发展任务通过GitHub问题来管理,在绝大多数情况下,发展应该与一个问题挂钩. 请自由提出问题 即使你不打算自己执行 在创建问题前, 请先检查是否已经存在 。 在创建一个问题时,给它一个描述性的标题,并在相关时包括截图. 如果您要开始开发, 请对一个问题发表评论 .

### 提交、修改和释放

我们正在使用 [语义释放](https://www.npmjs.com/package/@semantic-release/npm) 以自动版本和发布。 结合语义释放,我们也在使用 [常规承诺](https://www.conventionalcommits.org/en/v1.0.0/),一个承诺消息的规格,帮助语义释放理解每个承诺的改变程度,以便实现我们进程自动化.

在承诺时,两个步骤自动运行:(1) 起伏和(2) 核查常规承诺标准。 如果你还在学习常规承诺标准 我们建议不要运行 `git commit` 并在全球范围内安装被承诺体`npm install -g commitizen`,然后承诺 `git cz` 这将运行一个承诺信息 CLI。 CLI 向您询问了一系列关于您的更改列表的问题, 并以常规的 承诺格式为您构建承诺信息 .

在每次与主机合并时,我们出版的"故事书"都会被更新,一个UIC的新版本会自动被发布到npm.

### 调取请求

拉出请求向主分会开放. 当打开拉动请求时, 请填写整个拉动请求模板, 包括标记您的 PR 相关的问题, 描述您的 PR, 说明更改的类型, 包括审查者如何测试您的 PR 的细节, 以及测试清单 .

当您的公关准备审查时,请添加 `2 reviews needed` 给内部团队贴上标签 如果你是第一位审查员,你批准公关,将标签改为 `1 review needed`,如果您要求更改,请修改为 `needs changes`一旦公关准备好,第二审查者应更新公关 `ready to merge` 标签。 如果你做了一个公关 还没有准备好的眼睛, 添加 `wip` 标签.

公关一经批准,你就应该压平并合并. 我们经常等待作者在有权限的情况下合并自己的PR.

作为公关的审查者,不要只留下评论,而是采取明确的下一步行动. 如果PR需要进一步讨论或修改,请以要求的修改来标注. 如果一个PR看起来对您很好(或者即使有小的更改请求不需要您追加审查),请在它上加注批准并评论最后需要的几个更改. 这有助于其他审查人员更好地了解列表视图中公关状况,并避免额外的不必要的审查周期.

## 尾风

-   我们正在使用 [尾风](https://v2.tailwindcss.com/) 框架,在页级标记中,有时在组件中,使用其低级的公用类别。 我们配置设置在 `tailwind.config.js`。 。 。 .

## 供应商插件

-   [AG 网格](https://www.ag-grid.com/)

## 样式公约

-   我们的组件以SCSS文件与React组件TS文件同时被命名.
    
-   我们目前正在将组件迁移到第二代型号公约中,该公约依靠CSS变量作为内部设计标志并删除 `@apply` 尾风语. V2风格组件在我们的故事书中注明了: 三相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
    
-   Bloom设计标志包含许多风格,包括颜色,打字设置,大小,边框等,并有+.
    
-   有关这一移徙的更多信息,请参见: [V2Styles.md (英语)](https://github.com/bloom-housing/ui-components/blob/main/V2Styles.md)。 。 。 .
    

### 命名公约

-   注意根据内容、演示、位置或主题命名组件,因为这限制了使用
-   避免在ui组件中包含任何以 Bloom 为中心的业务逻辑,这样无论后端执行与否都可以被消耗

### 通则

-   不要用ID来做样式.
-   不要在地上筑巢.
-   不要解决问题! 使用.
-   不使用过量合格选取器; div.container 可以简单地说为.container.
-   使用弹性来代替浮.
-   使用电网公用统一电网.

### 无障碍因素

-   A11Y测试套房 根据我们的故事 运行在所有的公关
-   查看单个组件时查看 Storybook AXE 面板可能有用
-   键盘访问
    -   考虑aria角色,焦点状态
-   考虑颜色对比
-   无障碍表格
    -   每个输入的标签
    -   无标签输入的屏幕阅读器标签
    -   组合字段集
    -   所需指标
-   可读数据表
-   图像的替代标签
-   错误和提醒消息

## 常见问题

### @bloom-housing/ui-components 是什么？

Bloom经济适用住房系统共享用户界面组件

### 如何安装 @bloom-housing/ui-components？

在项目目录运行 npm install @bloom-housing/ui-components，或使用 pnpm add / yarn add / bun add。

### @bloom-housing/ui-components 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bloom-housing\_\_ui-components 是否存在。

### @bloom-housing/ui-components 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bloom-housing/ui-components 可以商用吗？

@bloom-housing/ui-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @bloom-housing/ui-components 的下载量有多少？

根据 npm 官方下载统计，@bloom-housing/ui-components 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,930 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bloom-housing/ui-components 还在维护吗？

最新版本 14\.1\.1 发布于 2026/09/18（1 个月前）；至今共发布 508 个版本，其中过去 12 个月发布了 13 个；首次发布于 2020/03/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

