# @blockchain-com/components 中文文档 规范地址：https://npmcn.com/package/%40blockchain-com/components/ 版本：6\.1\.1 npm 元数据更新时间：2023-07-13T14:26:06.901Z 中文译文更新时间：2026-11-09T23:12:31.982Z 软件包许可：AGPL-3\.0-or-later 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40blockchain-com/components 原文对照：https://npmcn.com/package/%40blockchain-com/components/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：10.9 MB，8195 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - 运行依赖：3 个 - peer 依赖：prop-types ^15\.6\.2，react ^16\.7\.0，react-dom ^16\.7\.0，styled-components ^4\.1\.3 - 首次发布：2018-07-30T16:43:07.380Z - 最新版本发布：2019-02-21T17:55:14.491Z - 近 30 天下载量：1698（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：65（近 12 个月 0 个） ## 中文简介 Blockchain.com 组件库 ## 安装 ```sh npm install @blockchain-com/components ``` 也可以使用：`pnpm add @blockchain-com/components`、`yarn add @blockchain-com/components`、`bun add @blockchain-com/components` ## README [![Coverage Status](https://coveralls.io/repos/github/blockchain/components/badge.svg?branch=master)](https://coveralls.io/github/blockchain/components?branch=master) [![Flow Coverage](https://npmcn.com/package/%40blockchain-com/components/artifacts/flow-coverage-badge.svg)](http://flow.org/) [![CircleCI](https://circleci.com/gh/blockchain/components/tree/master.svg?style=svg)](https://circleci.com/gh/blockchain/components/tree/master) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![Code Style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-green.svg)](https://conventionalcommits.org/) # 说明 图书馆 **构成部分** 以反应和样式组件为基础。 它包含基本的组件"原子",以及更复杂的"分子",用于其中的"原子" [Blockchain.com 页面存档备份,存于互联网档案馆](https://www.blockchain.com/) 生态系统. # 安装 快点 `npm i @blockchain-com/components` 你们可以走了! # 提示 ## 图标使用量 ### 1\. FontAsome 图标(免费版本) 使用 `` - **`Fas`** 是类型("Fab","Far"和"Fas"是可活性的) - `Fab` 匹配品牌图标集 - `Fas` 匹配固态图标集 - `Far` 匹配正则图标集 - **`...`** 格式化为 [帕斯卡案件](http://wiki.c2.com/?PascalCase)。 。 。 . 完整图标列表已提供 [这里](https://fontawesome.com/icons) 实例: ```javascript ``` ![cryptos](https://cldup.com/Zk6b878l6f.png) ### 2\. 加密图标 使用 `` - **`...`** 图标名称格式化为 [帕斯卡案件](http://wiki.c2.com/?PascalCase)。 。 。 . 可用的加密图标列表 [这里](http://cryptoicons.co/) 实例: ```javascript ``` ![cryptos](https://cldup.com/zp5HYSkfv6.png) ### 3\. 自定义(bc)图标 使用 `` - **`...`** 图标名称格式化为 [帕斯卡案件](http://wiki.c2.com/?PascalCase)。 。 。 . 自定义图标列表可供使用 [这里](https://github.com/blockchain/components/blob/master/src/Atoms/Icons/custom/index.js) 实例: ```javascript ``` ![cryptos](https://cldup.com/xMP2jL1hjW.png) # 发展 ## 工具 两者 `yarn` 财务报告和审定财务报表 `npm` 被支持. 命令使用 `npm` 不过,你可以使用 `yarn` 和它会 _只是工作间_ ## 链接 如果您想要更改库并反映您的更改在您的消费者应用上, 而无需推向回放和发布 1. `git clone git@github.com:blockchain/components.git` 2. `cd path-to/components` 3. `npm link` 4. `cd path-to/my-app` 5. `npm link @blockchain-com/components` :zap: 你需要运行 `npm link @blockchain-com/components` 每次你跑的时候 `npm i` 或者说 `yarn`. ## 故事书 1. 确保安装了节点版本QQ 8.0 2. 安装软件包 : `npm i` 3. 以 dev 模式启动应用程序 : `npm run start` 4. 图书馆现在可在 [本地主机: 6006](http://localhost:6006/) # 建筑 这个图书馆遵循 [原子设计](http://atomicdesign.bradfrost.com/chapter-2/) 原则. 已进一步注意确保所有组件均可使用,并完全能够运行,跨越主要网页浏览器\*,以及对任何屏幕大小的反应. 使用量大于1%的浏览器 : - IE 11 请检查URL=值 (帮助) - 萨法里11+ - Chrome / Edge / Firefox 最新两个主要版本 # 代码质量 ## 1\. 减肥 编码样式规则由 [高级](https://prettier.io/) 执行人 [埃斯林特语Name](https://eslint.org/) 这个 `good practices™` 我们所遵循的 [Javascript 标准样式](https://standardjs.com/rules.html) 以下命令可用 : - `npm run lint:js` - Lints JS 代码 - `npm run lint:css` - Lints 有样式组件 ## 2\. 单位测试 测试使用 [欢乐](https://facebook.github.io/jest/) 财务报告和审定财务报表 [酶](http://airbnb.io/enzyme/)。 。 。 . 以下命令可用 : - `npm test` - 运行单元测试 ## 3\. 巨钩 我们用 [胡斯基](https://github.com/typicode/husky) 自动部署 git 钩 在每一个 `git commit` 财务报告和审定财务报表 `git push` 我们进行单位测试 和起伏任务. 承诺信息也经过验证,必须遵循 [常规武器委员会](https://conventionalcommits.org/) 谱. ## 常见问题 ### @blockchain-com/components 是什么？ Blockchain\.com 组件库 ### 如何安装 @blockchain-com/components？ 在项目目录运行 npm install @blockchain-com/components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（^15\.6\.2）、react（^16\.7\.0）、react-dom（^16\.7\.0）、styled-components（^4\.1\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @blockchain-com/components 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/blockchain-com\_\_components 是否存在。 ### @blockchain-com/components 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @blockchain-com/components 可以商用吗？ @blockchain-com/components 使用 AGPL-3\.0-or-later 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。 ### @blockchain-com/components 的下载量有多少？ 根据 npm 官方下载统计，@blockchain-com/components 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,698 次，日均约 57 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @blockchain-com/components 还在维护吗？ 最新版本 6\.1\.1 发布于 2019/02/22（7 年前）；至今共发布 65 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/07/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。