<!--
 * @Author: codingfly
 * @Description: 
 * @Date: 2021-08-27 14:00:34
 * @LastEditTime: 2021-11-19 14:24:39
 * @FilePath: \ui_model\README.md
-->

<h1 align="center">@codingfly/remax-design</h1>

<div align="center">优雅、简洁的 Remax 组件库</div>

## 💫 特性

- 基于 `Remax` 开发 UI 组件
- 支持`微信` `支付宝` `钉钉` 小程序多端适配运行
- 支持按需引入
- 支持 TypeScript

## 📦 安装

```bash
yarn add @codingfly/remax-design -D
```

## 🎀 使用

## 按需加载

安装`babel-plugin-import`插件

```bash
$ yarn add babel-plugin-import -D
```

修改`babel.config.js`文件

```diff
// babel.config.js
module.exports = {
  plugins: [
+    [
+      'import',
+      {
+        libraryDirectory: 'es',
+        libraryName: '@codingfly/remax-design'
+      },
+      '@codingfly/remax-design'
+    ]
  ]
};

```

## 定制主题

修改`remax.config.js`文件

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

修改`app.tsx`文件

```diff
+import { ConfigProvider } from '@codingfly/remax-design';

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


## 🌰 示例

[示例](http://mohu.gitee.io/remaxui/)



