npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

anna-remax-ui

v1.9.3

Published

优雅、简洁的 Remax 组件库

Downloads

144

Readme

:tada: Anna 2.0

anna-remax-ui 现已升级到 2.0,并更名为 annar ,我们推荐您使用 annar 而不是 anna-remax-ui,我们将一直维护 annar 并 添加新的特性。

👉 查看 Anna 2.0,发现 Anna 的最新组件及特性!

💫 特性

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

📦 安装

npm install anna-remax-ui
yarn add anna-remax-ui

⚒ 使用

:warning: anna-remax-ui v1.6.0 为破坏性的更新,不再兼容以前的版本。

小程序

import { Button } from 'anna-remax-ui';

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

app.js 中引入样式:

import 'anna-remax-ui/dist/anna.css';

Web

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

npm install remax/one
import { Button } from 'anna-remax-ui/web';

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

引入样式:

import 'anna-remax-ui/dist/anna.css';

🥡 按需加载

anna-remax-ui 的 JS 部分默认支持 tree shaking。

小程序

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

import 'anna-remax-ui/esm/button/style/css';

// 如果你使用 sass,也可以这样引入
import 'anna-remax-ui/esm/button/style';

Web

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

🧑🏻‍💻 本地开发

$ git clone [email protected]:AnnaSearl/anna-remax-ui.git
$ cd anna-remax-ui
$ npm install
$ npm start

🤝 参与共建

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

Anna Remax UI 维护 masterfeature 两个分支,如果您是修复 bug,请提交到 master;如果您要添加新的功能,请提交到 feature

Pull Request 规范

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

常用命令

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

🌰 示例

Examples for Anna

🍭 体验

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

🍻 钉钉交流群