zqa2048/ui

基于 Remax 全平台 UI 库

凯桥 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' },
+       javascriptEnabled: true
+     }
+   })
+ ]
  ...
};

修改app.tsx文件

+import { ConfigProvider } from '@kqinfo/ui';

const App = (props) => {
-  return props.children;
+  return <ConfigProvider brandPrimary={'#2780d9'}>{props.children}</ConfigProvider>;
};

开发

安装依赖

$ 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
• 例子尽量写多点

钉钉交流群