| 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.
+
- 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.
- Medium-sized and large-scale applications.
- Multi-terminal applications based on react / preact / react-native.
- Custom UI-style applications.
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.
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.
$ npm install antd-mobile --saveEntry 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'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
Your custom UI library based on antd-mobile: web-custom-ui / web-custom-ui-pro
- Stable:
- Next:
- 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`
iOSAndroid 4.0+
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!
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!
