Skip to content

Latest commit

 

History

History
185 lines (133 loc) · 7.1 KB

introduce.en-US.md

File metadata and controls

185 lines (133 loc) · 7.1 KB
order title
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. (antd-mobile-rn)
  • Provide "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.
  • Fully compatible with react / preact.

Applicable Scenes

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

Getting Started

Before delving into Ant Design React, a good knowledge of React and ES2015 is needed.

Make sure that you had installed Node.js(> v4.x) correctly.

1. Create a New Project

Can be an existing project, or a newly created empty project with dva / create-react-app, you can also copy and modify from the official example scaffolding.

More official examples. Also, you can use any scaffold available in React ecosystem.

2. Installation

$ npm install antd-mobile --save

3. Usage

Entry html page settings:

Add FastClick and set the html meta (more ref #576)

Use Promise fallback support (some Android phones do not support Promise)

<!DOCTYPE html>
<html>
<head>
  <!-- set `maximum-scale` for some compatibility issues -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
</head>
<body></body>
</html>

Example of usage:

import { Button } from 'antd-mobile';
ReactDOM.render(<Button>Start</Button>, mountNode);

And import stylesheets manually:

import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
Use modularized antd-mobile

Note: Strongly recommended.

The following two ways used to load the only components you used, select one of the ways you like.

  • Use babel-plugin-import (Recommended)

    // .babelrc or babel-loader option
    {
      "plugins": [
        ["import", { "libraryName": "antd-mobile", "style": "css" }] // `style: true` for less
      ]
    }

    This allows you to import components from antd-mobile without having to manually import the corresponding stylesheet. The babel plugin will automatically import stylesheets.

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

    import DatePicker from 'antd-mobile/lib/date-picker';  // for js
    import 'antd-mobile/lib/date-picker/style/css';        // for css
    // import 'antd-mobile/lib/date-picker/style';         // that will import less
More enhanced (optional):

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

Version

  • Stable: npm package
  • Next: npm package

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

Companies using antd-mobile

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. Join the chat at https://gitter.im/ant-design/ant-design