React Components

npm version TravisCI CircleCI codecov Commitizen friendly Conventional Commits

前排注意事项

  • 一些没有写在文档中的 props 以及方法等强烈不建议使用,因为这类 API 可能会随时变动。版本更新后可能会发生不可预知的问题。

浏览器兼容

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE11, Edge 1829307

如何使用

  • 组件依赖于 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 中使用

添加到依赖

  1. 通过 Create-React-App 创建好项目
  2. 按照上述文档将 react-components 添加到依赖,然后按照需要去引用

模块化支持

  1. 修改项目的自定义配置,不支持的需要先执行 npm run eject
  2. 按照上述文档在 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 以下
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司