# @carbon/ibm-products 中文文档 规范地址：https://npmcn.com/package/%40carbon/ibm-products/ 版本：2\.102\.0 npm 元数据更新时间：2026-10-28T08:14:23.131Z 中文译文更新时间：2026-11-09T02:40:23.181Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40carbon/ibm-products 原文对照：https://npmcn.com/package/%40carbon/ibm-products/?lang=original 项目主页：https://github.com/carbon-design-system/ibm-products#readme 源码仓库：https://github.com/carbon-design-system/ibm-products ## 关键信息（来自 npm 元数据） - 包体积（解压后）：22 MB，3760 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：15 个 - peer 依赖：react ^16\.8\.6 \|\| ^17\.0\.1 \|\| ^18\.2\.0 \|\| ^19\.0\.0，react-is ^16\.13\.1 \|\| ^17\.0\.2 \|\| ^18\.3\.1 \|\| ^19\.0\.0，react-dom ^16\.8\.6 \|\| ^17\.0\.1 \|\| ^18\.2\.0 \|\| ^19\.0\.0，@carbon/grid ^11\.64\.0，@carbon/type ^11\.69\.0，@carbon/react ^1\.118\.0，@carbon/layout ^11\.61\.0，@carbon/motion ^11\.54\.0，@carbon/themes ^11\.83\.0 - 首次发布：2021-11-16T16:50:38.488Z - 最新版本发布：2026-10-28T08:14:22.791Z - 近 30 天下载量：137317（2026-10-09 至 2026-11-07，npm 官方下载统计） - 已发布版本数：680（近 12 个月 56 个） ## 中文简介 IBM产品用碳 ## 安装 ```sh npm install @carbon/ibm-products ``` 也可以使用：`pnpm add @carbon/ibm-products`、`yarn add @carbon/ibm-products`、`bun add @carbon/ibm-products` ## README # @碳/碳产品 > IBM产品中的碳是封闭源的开源执行 [模式资产库(PAL)](https://pages.github.ibm.com/carbon/ibm-products/)。 。 。 . 这些 PAL 设计基于 IBM 的开源碳设计 系统和反应实施,提供超出 典型组件库。 IBM产品中的碳以前称为: IBM云与认知的碳(@碳/ibm-cloud-认知),以及这个 名称仍然可以在各地和历史日志中遇到. [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](https://npmcn.com/package/%40carbon/ibm-products/#readme-contributors-) [![Licensed under the Apache License, Version 2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/ibm-products/blob/master/LICENSE) [![Build status](https://github.com/carbon-design-system/ibm-products/actions/workflows/ci.yml/badge.svg)](https://github.com/carbon-design-system/ibm-products/actions/workflows/ci.yml) [![Netlify status](https://img.shields.io/netlify/e8cd9972-0fc8-4c51-a911-e9a930ca6605)](https://app.netlify.com/sites/v11-carbon-for-ibm-products/deploys) [![GitHub Lerna version](https://img.shields.io/github/lerna-json/v/carbon-design-system/ibm-products)](https://lerna.js.org/) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/carbon-design-system/ibm-products/blob/master/.github/CONTRIBUTING.md) > IBM产品常用UI组件的碳 ## 开始 如果你只是开始浏览我们的反应组件 看看这个 [我们的故事本](https://ibm-products.carbondesignsystem.com/)。 。 。 . ### 为IBM产品安装碳 要将碳用于IBM产品组件,你只需要安装 `@carbon/ibm-products` 软件包. ```shell $ yarn add @carbon/ibm-products # or $ npm install @carbon/ibm-products ``` 然后可以导入您的组件样式 `index.js`。 。 。 . ```js import '@carbon/ibm-products/css/index.min.css'; ``` ### 网页包 4 我们的软件包需要支持ES模块(见 [#2378号](https://github.com/carbon-design-system/ibm-products/issues/2378#issuecomment-1319276192)) (中文(简体) ). 在Webpack 5中,这些默认支持. 在 Webpack 4 中,您需要添加 页:1 [遵守规则](https://stackoverflow.com/a/72149467) 给你的配置. ```js rules: [ { test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto', }, ], ``` ### 同伴依赖关系 `@carbon/ibm-products` 以碳组件为上部,并具有若干 需要安装的依赖性 . - 安装 [`carbon-components-react`](https://www.npmjs.com/package/carbon-components-react) 根据包件指令 - 安装 [`@carbon/icons-react`](https://www.npmjs.com/package/@carbon/icons-react) 作为 每个软件包指令 - 安装 [`@carbon/elements`](https://www.npmjs.com/package/@carbon/elements) 根据包件指令 **说明:** `@carbon/elements` 卷起一些碳包 可能是 独立安装。 由于这一系列的依赖性可能会改变,我们离开你 视图 `package.json` 如果您想要安装个人, 则在 ibm 产品中 软件包. ## 实例 ### 在线实例 每个发布部分的例子,以及一些尚未完全准备好的例子, 此处可见于 [代码框](https://codesandbox.io/p/sandbox/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/example-gallery?file=%2Fsrc%2Fcomponents%2FGallery.jsx%3A7%2C26) [堆叠闪烁](https://stackblitz.com/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/example-gallery?file=src%2Fcomponents%2FGallery.jsx) ### 软件包 您可以使用组件在 [示例文件夹](https://npmcn.com/package/examples/carbon-for-ibm-products)。 。 。 . ## 使用量 要开始使用组件 ```jsx import { AboutModal } from '@carbon/ibm-products'; const App = () => { return ; }; ``` ### 软件包前缀 这个 `@carbon/ibm-products` 软件包使用默认的前缀 `c4p` 支助科 选择者和一些ID. #### 更改前缀 在此之前 `@carbon/ibm-products` 组件以脚本或样式加载 请确保您已完成以下工作 . ```js import { pkg } from '@carbon/ibm-products/es/settings'; pkg.prefix = 'tst'; ``` 当使用库中的多个组件时: ```css @use '@carbon/ibm-products/scss' with ( $pkg-prefix: 'tst' ); ``` 当使用单个组件时, 例如 About Modal : ```css @use '@carbon/ibm-products/scss/config' with ( $pkg-prefix: 'tst' ); @use '@carbon/ibm-products/scss/components/AboutModal'; ``` 见 [实例画廊](https://ibm-products.carbondesignsystem.com/?path=/story/overview-examples--c-4-p-gallery-code-sandbox) 对于最新的前缀示例. ### 启用加那利元件和标记特性 尚未完成释放审查程序的组成部分得到考虑 要求消费者通过图案旗在 `config.js` 文档. 例如,创建 `config.js` 在你身边 `src` 目录 : ```js import { pkg } from '@carbon/ibm-products'; // Enable 'canary' (not yet reviewed/released) components // that we want to make use of pkg.component.AboutModal = true; pkg.component.SidePanel = true; // Live dangerously: enable all components! pkg.setAllComponents(true); // Enable a feature flagged examples pkg.feature.nameOfFeature = true; pkg.feature['Component.feature'] = true; // Live dangerously: enable all pre-release features! pkg.setAllFeatures(true); ``` 可找到组件和特性旗设置的默认值 运行以下命令. ```bash node node_modules/@carbon/ibm-products/flags.js ``` **说明:** 上述设置必须先于组件生成或 特性首先被使用. **说明:2** 在通过钩子执行特征的情况下,该特征可能 函数不启用。 在所有情况下,默认禁用特性都会 在控制台中登录一个警告,如果启用了特性旗,或者没有启用错误. ### 在当地建设和运行 要启动, 请运行以下命令, 故事本将建起然后 在端口服务 `3000` 在您的本地机器上. ```shell yarn yarn storybook ``` 要构建所有软件包,请运行以下命令. ```shell yarn build ``` ## 浏览器支持 该库支持最新版本的: - 苹果沙发 - 谷歌颜色 - 微软边缘 - Mozilla Firefox 喷出火花 ## 捐款 这个项目是由几个社区成员投资的 他们宝贵的时间 给回碳社区。 它将继续是 通过让那些受益于一揽子计划的人为一揽子计划作出贡献,是可能的. 所以,别害羞。 我们都依赖并赞赏新老贡献者, 他们帮助我们修补错误,构建出新的功能,改进我们的文档等. 如果你有兴趣,肯定检查我们 [贡献指南](https://github.com/carbon-design-system/ibm-products/blob/master/.github/CONTRIBUTING.md) 财务报告和审定财务报表 [碳开发者手册](https://github.com/carbon-design-system/carbon/blob/master/docs/developer-handbook.md)来啊! 👀

李大通
💻
戴维·梅嫩德斯
💻
马修·加洛
💻

西蒙·菲尼
💻
波利娜·奥莱姆斯卡亚
💻
## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测 本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 . ## 许可证 凭 [Apache-2.0 许可证](https://github.com/carbon-design-system/ibm-products/blob/master/LICENSE)。 。 。 . [![This site is powered by Netlify](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com/) ## 常见问题 ### @carbon/ibm-products 是什么？ IBM产品用碳 ### 如何安装 @carbon/ibm-products？ 在项目目录运行 npm install @carbon/ibm-products，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.6 \|\| ^17\.0\.1 \|\| ^18\.2\.0 \|\| ^19\.0\.0）、react-is（^16\.13\.1 \|\| ^17\.0\.2 \|\| ^18\.3\.1 \|\| ^19\.0\.0）、react-dom（^16\.8\.6 \|\| ^17\.0\.1 \|\| ^18\.2\.0 \|\| ^19\.0\.0）、@carbon/grid（^11\.64\.0）、@carbon/type（^11\.69\.0）、@carbon/react（^1\.118\.0）、@carbon/layout（^11\.61\.0）、@carbon/motion（^11\.54\.0）、@carbon/themes（^11\.83\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @carbon/ibm-products 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @carbon/ibm-products 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @carbon/ibm-products 可以商用吗？ @carbon/ibm-products 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @carbon/ibm-products 的下载量有多少？ 根据 npm 官方下载统计，@carbon/ibm-products 在 2026/10/09 – 2026/11/07 这 30 天内被下载 137,317 次，日均约 4,577 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @carbon/ibm-products 还在维护吗？ 最新版本 2\.102\.0 发布于 2026/10/28（12 天前）；至今共发布 680 个版本，其中过去 12 个月发布了 56 个；首次发布于 2021/11/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。