jimmy0766 / ant-design-mobile Goto Github PK

View Code? Open in Web Editor NEW

A configurable Mobile UI

License: MIT License

JavaScript 16.24% TypeScript 49.86% CSS 28.17% HTML 1.08% Python 0.28% Java 0.30% Objective-C 4.06%

ant-design-mobile's Introduction

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.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+

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! :)

Recommend Projects