@碳/碳产品
IBM产品中的碳是封闭源的开源执行 模式资产库(PAL)。 。 。 . 这些 PAL 设计基于 IBM 的开源碳设计 系统和反应实施,提供超出 典型组件库。 IBM产品中的碳以前称为: IBM云与认知的碳(@碳/ibm-cloud-认知),以及这个 名称仍然可以在各地和历史日志中遇到.
IBM产品常用UI组件的碳
开始
如果你只是开始浏览我们的反应组件 看看这个 我们的故事本。 。 。 .
为IBM产品安装碳
要将碳用于IBM产品组件,你只需要安装
@carbon/ibm-products 软件包.
$ yarn add @carbon/ibm-products
# or
$ npm install @carbon/ibm-products
然后可以导入您的组件样式 index.js。 。 。 .
import '@carbon/ibm-products/css/index.min.css';
网页包 4
我们的软件包需要支持ES模块(见 #2378号) (中文(简体) ). 在Webpack 5中,这些默认支持. 在 Webpack 4 中,您需要添加 页:1 遵守规则 给你的配置.
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
},
],
同伴依赖关系
@carbon/ibm-products 以碳组件为上部,并具有若干
需要安装的依赖性 .
- 安装
carbon-components-react根据包件指令 - 安装
@carbon/icons-react作为 每个软件包指令 - 安装
@carbon/elements根据包件指令
说明: @carbon/elements 卷起一些碳包 可能是
独立安装。 由于这一系列的依赖性可能会改变,我们离开你
视图 package.json 如果您想要安装个人, 则在 ibm 产品中
软件包.
实例
在线实例
每个发布部分的例子,以及一些尚未完全准备好的例子, 此处可见于
软件包
您可以使用组件在 示例文件夹。 。 。 .
使用量
要开始使用组件
import { AboutModal } from '@carbon/ibm-products';
const App = () => {
return <AboutModal />;
};
软件包前缀
这个 @carbon/ibm-products 软件包使用默认的前缀 c4p 支助科
选择者和一些ID.
更改前缀
在此之前 @carbon/ibm-products 组件以脚本或样式加载
请确保您已完成以下工作 .
import { pkg } from '@carbon/ibm-products/es/settings';
pkg.prefix = 'tst';
当使用库中的多个组件时:
@use '@carbon/ibm-products/scss' with (
$pkg-prefix: 'tst'
);
当使用单个组件时, 例如 About Modal :
@use '@carbon/ibm-products/scss/config' with (
$pkg-prefix: 'tst'
);
@use '@carbon/ibm-products/scss/components/AboutModal';
见 实例画廊 对于最新的前缀示例.
启用加那利元件和标记特性
尚未完成释放审查程序的组成部分得到考虑
要求消费者通过图案旗在
config.js 文档.
例如,创建 config.js 在你身边 src 目录 :
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);
可找到组件和特性旗设置的默认值 运行以下命令.
node node_modules/@carbon/ibm-products/flags.js
说明: 上述设置必须先于组件生成或 特性首先被使用.
说明:2 在通过钩子执行特征的情况下,该特征可能 函数不启用。 在所有情况下,默认禁用特性都会 在控制台中登录一个警告,如果启用了特性旗,或者没有启用错误.
在当地建设和运行
要启动, 请运行以下命令, 故事本将建起然后
在端口服务 3000 在您的本地机器上.
yarn
yarn storybook
要构建所有软件包,请运行以下命令.
yarn build
浏览器支持
该库支持最新版本的:
- 苹果沙发
- 谷歌颜色
- 微软边缘
- Mozilla Firefox 喷出火花
捐款
这个项目是由几个社区成员投资的 他们宝贵的时间 给回碳社区。 它将继续是 通过让那些受益于一揽子计划的人为一揽子计划作出贡献,是可能的.
所以,别害羞。 我们都依赖并赞赏新老贡献者, 他们帮助我们修补错误,构建出新的功能,改进我们的文档等.
如果你有兴趣,肯定检查我们 贡献指南 财务报告和审定财务报表 碳开发者手册来啊! 👀
 李大通 💻 |
 戴维·梅嫩德斯 💻 |
 马修·加洛 💻 |
 西蒙·菲尼 💻 |
 波利娜·奥莱姆斯卡亚 💻 |
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .
许可证
凭 Apache-2.0 许可证。 。 。 .
