Skip to content

Latest commit

 

History

History
106 lines (71 loc) · 3.16 KB

README.md

File metadata and controls

106 lines (71 loc) · 3.16 KB
Raw

Ant Design Mobile npm package NPM downloads Dependency Status

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.render(<Button>Start</Button>, mountNode);

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';

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

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

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-antd
import { 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! :)