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;
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'; { return <Button>Start</Button>; } AppRegistry;
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-antdimport Button from 'antd-mobile';
Browser Support
iOS
Android 4.0+
Links
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! :)