Annar

💫 特性

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

📦 安装

npm install annar

yarn add annar

🎀 使用

小程序

import { Button } from 'annar';

const App = () => (
  <>
    <Button>Click Annar</Button>
  </>
);

在 app.js 中引入样式：

import 'annar/dist/annar.css';

Web

使用 Web 组件开发需要依赖 remax/one

npm install remax/one

import { Button } from 'annar/web';

const App = () => (
  <>
    <Button>Click Annar</Button>
  </>
);

引入样式：

import 'annar/dist/annar.css';

🥡 按需加载

annar 的 JS 部分默认支持 tree shaking。

小程序

CSS 部分需要在 app.js 中手动引入

import 'annar/esm/button/style/css';

// 如果你使用 sass，也可以这样引入
import 'annar/esm/button/style';

Web

通过配置 babel-plugin-import 进行 CSS 的按需加载

🧑🏻‍💻 本地开发

$ git clone [email protected]:AnnaSearl/annar.git
$ cd annar
$ npm install
$ npm start

🤝 参与共建

如果你有任何问题，可以提交 issue 给我们，我们也非常欢迎你加入 Annar 的建设，向我们提交 PR。

Annar 维护 master 和 feature 两个分支，如果您是修复 bug，请提交到 master；如果您要添加新的功能，请提交到 feature。

Pull Request 规范

1. 我们建议保持你的 PR 足够小。保证一个 PR 只解决一个问题或只添加一个功能
2. 在 PR 中请添加合适的描述，并关联相关的 Issue
3. 在 Pull Request 前，请同步主仓库的最新代码

常用命令

1. npm start 在本地运行 Annar 的网站
2. npm run lint 检查代码风格
3. npm run build 编译 TypeScript 代码到 esm、web 以及 dist 目录

🌰 示例

Examples for Annar

🍭 体验

🚦 体验小程序上的组件版本较低，若想查看 Annar 的最新组件及特性，请前往 官方文档

🍻 钉钉交流群