Ant Design Mobile

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-antd

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

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

Then you can import components from antd-mobile directly.

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

Browser Support

• iOS
• Android 4.0+

Links

• Home Page
• Developer Instruction
• React components

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! :)