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.

How antd-mobile deal with web & react-native components? Please see Wiki

Web usage

The following doc based on webpack@1.x version, if you are using webpack@2.x, please see #516

• install webpack loader deps

  npm i style-loader css-loader less less-loader svg-sprite-loader@0.3.1 --save-dev

• Set the resolve field on webpack configuration file to load web&native components automaticlly.

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

• Use the babel-plugin-import to support component to load on demand:

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

If you are curious about why we need babel-plugin-import , see Import on Demand

• all icon of antd-mobile are svg file, so you need to set svg-sprite-loader, see Icon docs for details.

• Entry html page Required settings:

  • since antd-mobile css use rem, you need to add viewport scale and html fontSize setting scripts to your html header, see Antd-Mobile-viewport-setting-wiki for details.
  • Add 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:

Size

• Components are loaded on demand, in other words, components that are not imported are not packed.

• The size and dependency analysis of `./dist/antd-mobile.min.js`

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.