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

antd_mobile_custom_ui_exa

v0.3.0

Published

Ant Design 移动版的聚宝风格定制版

Downloads

4

Readme

antd_mobile_custom_ui_exa

antd_mobile_custom_ui_exa 是 Ant Design Mobile 针对聚宝风格的 React 实现。 我们在 antd-mobile 的基础上,参照「聚宝 UI 设计规范」进行了风格定制。

Install & Usage

introduce

开发

# need `node@6+`  `npm@3+`

$ npm i
$ ./node_modules/.bin/gulp  # 自动同步 antd-mobile 组件和 demo ,并监控文件变化(注意过程中的提示)

访问

  • pc: 本地 http://127.0.0.1:8001
  • mobile: 本地 http://127.0.0.1:8002
& npm run pub   # 构建并发布到 npm
& gulp site   # 构建网站文件,手工放到 GitHub gh-pages 分支即可

风格定制包开发

  1. 拷贝本仓库。
  2. 全局替换 antd_mobile_custom_ui_exa 为你的包名,例如 xxx-ui,并修改相应文档的文案。
  3. 按照上面的 开发 文档,跑起来。
  4. themes/default.less文件里覆盖 antd-mobile 提供的相应 less 变量 (可以在此目录添加更多的 theme 文件)。
  5. 仅覆盖变量无法满足需求,在components/xx/index.tsx文件里添加自己的代码逻辑。

组件的目录结构如下:

components/steps
├── demo
│   ├── basic.md         // 演示文档,可以有多个
│   └── another.md
├── index.md              // 组件的入口文档
├── index.tsx             // 组件 JS 入口,通常依赖 antd-mobile 上的对应组件并直接暴露
└── style
    ├── index.less        // 组件样式,通常依赖 antd-mobile 上的对应样式并进行复写
    └── index.tsx         // 组件样式的入口

通常需要进行复写的源码有以下两个:

  • index.tsx 使用 typescript 规范进行书写:

    // 依赖后直接暴露
    import Button from 'antd-mobile/lib/steps/index';
    export default Button;
    import React from 'react';
    import Icon from 'antd-mobile/lib/icon/index';
    
    export interface Props {
      prefixCls?: string;
    }
    export default class MyIcon extends React.Component<Props, any> {
      static defaultProps = {
        prefixCls: 'am-icon',
      };
      render() {
        return (
          <span className="extend-icon"><Icon {...this.props} /></span>
        )
      }
    }
  • style/index.less

    @import '~antd-mobile/lib/icon/style/index.less';
    
    .extend-icon {
      padding: 10px; // extend touch area
    }