introduce.en-US.md

order	english
0	Ant Design Mobile of React

antd-mobile is the React implementation of the Ant Design's mobile specification, serving the ant and koubei wireless service.

+

<style> .pic-plus > * { display: inline-block; vertical-align: middle; } .pic-plus { margin: 40px 0; } .pic-plus span { font-size: 30px; color: #aaa; margin: 0 40px; } </style>

Features and Advantages

• The UI is fully Configurable and Scalable, easily adapt to all kinds of product style.
• Support Web / iOS / Android platform (Based on React Native), has a wealth of components, can fully cover all kinds of scenes.
• Built-in "Components are loaded on demand" / "Web page HD display" / "SVG Icon" optimization features, integrated development.
• Use TypeScript to develop, provide type definition files, support type and attribute smart tips for easy business development.

Applicable Scenes

• Medium-sized and large-scale applications.
• Multi-terminal applications based on react / react-native.
• Custom UI-style applications.

Installation

$ npm install antd-mobile --save
$ npm install babel-plugin-import --save-dev

Usage

If you encounter an error, please refer #56 and Samples first.

Web usage

The following use the webpack@1.x version, if it is webpack@2.x please modify the corresponding configuration yourself.

• Set the resolve field on webpack configuration file.

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

• Use the babel-plugin-import plugin support component to load on demand, set as follows:

  // .babelrc
  {"plugins": [["import", { "style": "css", "libraryName": "antd-mobile" }]]}
  // or webpack config file
  webpackConfig.babel.plugins.push(['import', { libraryName: 'antd-mobile', style: 'css' }]);

• It is generally necessary to use the Icon component, need to configure svg-sprite-loader, see Icon docs for details.

• Entry html page Required settings:

  • Use HD program settings, see antd-mobile-0.8-以上版本「高清」方案设置 for details.
  • Use FastClick (ref #576)
  • Use Promise fallback support (some Android phones do not support Promise), as follows:

    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }

Example of usage:

// Auto import js and css modularly, parsed by babel-plugin-import
import { Button } from 'antd-mobile';
ReactDOM.render(<Button>Start</Button>, mountNode);

Other useful resources: Server-side rendering discussion / Custom theme.

Your custom UI library based on antd-mobile: web-custom-ui / web-custom-ui-pro

React-Native usage

Note: Table/Menu/NavBar does not have React-Native implementation.

• Edit .babelrc as follows:

  {"plugins": [["import", { "libraryName": "antd-mobile" }]]}

Example of usage:

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

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

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

More common questions, please see wiki pages.

Version

• Stable:
• Beta:

Environment Support

• iOS
• Android 4.0+

Links

• Home Page
• Developer Instruction
• React components

Companies using antd-mobile

• Ant Financial
• Alibaba
• Koubei

Contributing

Please read our CONTRIBUTING.md first.

If you'd like to help us improve antd-mobile, just create a Pull Request. Feel free to report bugs and issues here.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way and How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Need Help?

For questions on how to use antd, please post questions to stackoverflow using the antd/antd-mobile tag. If you're not finding what you need on stackoverflow, you can find us on gitter as well.

As always, we encourage experienced users to help those who are not familiar with antd!

1. Stack Overflow
2. Segment Fault
3.