凯桥 UI
使用
$ yarn add @kqinfo/ui
按需加载
安装babel-plugin-import
插件
$ yarn add babel-plugin-import -D
修改babel.config.js
文件
// babel.config.js
module.exports = {
plugins: [
+ [
+ 'import',
+ {
+ libraryDirectory: 'es',
+ libraryName: '@kqinfo/ui'
+ },
+ '@kqinfo/ui'
+ ]
]
};
定制主题
修改remax.config.js
文件
module.exports = {
...
- plugins: [less()],
+ plugins: [
+ less({
+ lessOptions: {
+ modifyVars: { '@brand-primary': '#2780d9', '@brand-attract': '#ff9d46' },
+ javascriptEnabled: true
+ }
+ })
+ ]
...
};
修改app.tsx
文件
+import { ConfigProvider } from '@kqinfo/ui';
const App = (props) => {
- return props.children;
+ return <ConfigProvider brandAttract={'#ff9d46'} brandPrimary={'#2780d9'}>{props.children}</ConfigProvider>;
};
使用源安装
在项目根目录添加.npmrc
文件
canvas_binary_host_mirror=https://npm.taobao.org/mirrors/canvas/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver/
sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli
cypress_download_mirror=https://npm.taobao.org/mirrors/cypress/
用yarn
安装的话添加.yarnrc
文件
canvas_binary_host_mirror: https://npm.taobao.org/mirrors/canvas
registry: https://registry.npm.taobao.org
ENTRYCLI_CDNURL: https://cdn.npm.taobao.org/dist/sentry-cli
sentrycli_cdnurl: https://cdn.npm.taobao.org/dist/sentry-cli
开发
安装依赖
$ yarn
启动服务
$ yarn start
本地调试
启动调试
$ yarn dev
本地连接
$ yarn link
本地项目调试
$ yarn link @kqinfo/ui
编写测试
- 相关库 jest 、testing-library
- 如何编写测试
开发注意项
- 先
fork
到自己名下,再提merge request
- 样式不要嵌套
- 样式用
less-modules
- 表单组件暴露
value
和onChange
- 不要用图片当
icon
- 尽量暴露节点的
class
,缩写用cls
,比如暴露子项类名就用itemCls
- 例子尽量写多点