@kqinfo/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',
+      {
+        libraryName: 'parsec-hooks',
+        camel2DashComponentName: false,
+        customName: name => {
+          if (/^(use)/.test(name)) {
+            return `parsec-hooks/lib/${name
+              .replace(/^(use)/, '')
+              .replace(/^\S/, s => s.toLowerCase())}Hooks`;
+          } else {
+            return `parsec-hooks/lib/utils/${name}`;
+          }
+        }
+      }
+    ],
+    [
+      'import',
+      {
+        libraryName: 'antd-mobile',
+        style: true
+      },
+      'antd-mobile'
+    ],
+    [
+      'import',
+      {
+        libraryDirectory: 'es',
+        libraryName: '@kqinfo/ui'
+      },
+      '@kqinfo/ui'
+    ]
  ]
};

定制主题

修改remax.config.js文件

module.exports = {
  ...
-  plugins: [less()],
+  plugins: [
+   less({
+     lessOptions: {
+       modifyVars: { '@brand-primary': '#2780d9' }
+     }
+   })
+ ]
  ...
};

修改app.tsx文件

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

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

开发

安装依赖

$ yarn

启动服务

$ yarn start

本地调试

启动调试

$ yarn dev

本地连接

$ yarn link

本地项目调试

$ yarn link @kqinfo/ui

开发注意项

• 先fork到自己名下，再提merge request
• 样式不要嵌套
• 样式用less-modules
• 表单组件暴露value和onChange
• 不要用图片当icon
• 尽量暴露节点的class，缩写用cls，比如暴露子项类名就用itemCls
• 例子尽量写多点