@ucloud-pccl/react-components v1.2.41
React Components
前排注意事项
- 一些没有写在文档中的 props 以及方法等强烈不建议使用,因为这类 API 可能会随时变动。版本更新后可能会发生不可预知的问题。
浏览器兼容
IE / Edge | Firefox | Chrome | Safari |
---|---|---|---|
IE11, Edge 18 | 29 | 30 | 7 |
如何使用
组件依赖于 react(^16)、react-dom(^16),请注意引入对应依赖,从 0.7.0 开始,不再兼容 react 15。
使用 npm 或 yarn 进行安装
<!-- install use yarn -->
yarn add @ucloud-fe/react-components
<!-- install use npm -->
npm install @ucloud-fe/react-components
<!-- install with a fixed version -->
yarn add @ucloud-fe/react-components@0.3.1
- 需要注意对应修改 webpack 的 loader 配置,根据项目具体配置
{
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.(svg|eot|ttf|woff)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].[ext]'
}
}
]
}
];
}
实现模块化加载
- 通过
babel-plugin-import
实现模块化加载
<!-- 添加import插件 --> npm install babel-plugin-import --dev
<!-- 在babel的plugins中添加配置 --> { "plugins": [ [ "import", { "libraryName": "@ucloud-fe/react-components", "camel2DashComponentName": false, "libraryDirectory": "lib/components" } ] ] }
- 或者直接手动引用对应文件来实现模块化加载
import Button from '@ucloud-fe/react-components/lib/components/Button';
- 通过
如何在 Create-React-App 中使用
添加到依赖
- 通过 Create-React-App 创建好项目
- 按照上述文档将 react-components 添加到依赖,然后按照需要去引用
模块化支持
- 修改项目的自定义配置,不支持的需要先执行
npm run eject
。 - 按照上述文档在 babel 的 plugin 中添加配置
zIndex 说明
- Modal、Drawer 默认的 zIndex 为 1010
- Popover 默认的 zIndex 为 1030
- Tooltip、Select、DatePicker、TimePicker、ActionList、PopConfirm 等 zIndex 同为 1030,弹出层容器、层级、滚动定位可通过 ConfigProvider 统一配置
- Message 默认的 zIndex 为 1060
- Loading 默认的 zIndex 为 10
- 其余内部使用的 zIndex 为 10 以下
6 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago