ant-design-mobile editorconfig travis-ci npm webpack

A configurable Mobile UI

Ant Design Mobile npm package NPM downloads Dependency Status

A configurable Mobile UI specification and React-based implementation.

Features

  • Follow Ant Design Mobile UI specification.
  • Configurable UI style for different products.
  • Support web and native usages based on React Native.
  • Develop in TypeScript.

Demo

mobile web demo

http://mobile.ant.design/kitchen-sink/

react native demo

Install

$ npm install antd-mobile --save

Usage

Web

import 'antd-mobile/lib/button/style';
import Button from 'antd-mobile/lib/button';

ReactDOM.render(<Button>Start</Button>, mountNode);

Set webpack to resolve .web.js suffix

resolve: {
  modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
  extensions: ['', '.web.js', '.js', '.json'],
},

React-Native

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from 'antd-mobile/lib/button';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

Use babel-plugin-import

Use babel-plugin-import (Recommended) to reduce bundle size.

// .babelrc
// no need to set style property in react-native
{
 "plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]]
}

Then you can import components from antd-mobile directly.

// import js and css modularly, parsed by babel-plugin-import
import { Button } from 'antd-mobile';

Browser Support

  • iOS
  • Android 4.0+

Links

Contributing

We welcome all contributions, please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as a GitHub issue. If you’d like to improve code, check out the Development Instruction and have a good time! :)

Related Repositories

ant-design-mobile

ant-design-mobile

A configurable Mobile UI ...

ng-zorro-antd-mobile

ng-zorro-antd-mobile

A configurable Mobile UI components based on Ant Design Mobile and Angular. ...

dva-antd-mobile-starter

dva-antd-mobile-starter

Get started with Dva.js and Ant Design mobile. ...

react-antd-mobile-demo

react-antd-mobile-demo

针对Ant Design Mobile (http://mobile.ant.design/) 的一个demo ...

1x.mobile.ant.design

1x.mobile.ant.design

[email protected] site, http://1x.mobile.ant.design ...


Top Contributors

pingan1927 silentcloud warmhug yiminghe liqi07 afc163 foriacus chinalife ottomao lotushacker linfaxin benjycui OUZICHENG snadn gutenye Shafley jljsj33 havefive

Releases

-   1.0.0-alpha.7 zip tar
-   1.0.0-alpha.6 zip tar
-   1.0.0-alpha.5 zip tar
-   1.0.0-alpha.4 zip tar
-   1.0.0-alpha.2 zip tar
-   1.0.0-alpha.0 zip tar
-   0.9.4 zip tar
-   0.9.3 zip tar
-   0.9.2 zip tar
-   0.9.1 zip tar
-   0.9.0 zip tar
-   0.9.0-beta.1 zip tar
-   0.9.0-beta.0 zip tar
-   0.8.7 zip tar
-   0.8.6 zip tar
-   0.8.5 zip tar
-   0.8.4 zip tar
-   0.8.3 zip tar
-   0.8.2 zip tar
-   0.8.1 zip tar
-   0.8.0 zip tar
-   0.7.8 zip tar
-   0.7.7 zip tar
-   0.7.6 zip tar
-   0.7.5 zip tar
-   0.7.4 zip tar
-   0.7.3 zip tar
-   0.7.2 zip tar
-   0.7.1 zip tar
-   0.7.0 zip tar