AntFB Mobile

A configurable Mobile UI specification and React-based implementation.

Features

• Follow AntFB 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://diy-design.me/n.html?%2F&port=8002/kitchen-sink/

react native demo

Install

$ npm install antFB-mobile --save

Usage

Web

import 'antFB-mobile/lib/button/style';
import Button from 'antFB-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 'antFB-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": "antFB-mobile" }]]
}

Then you can import components from antFB-mobile directly.

// import js and css modularly, parsed by babel-plugin-antd
import { Button } from 'antFB-mobile';

Browser Support

• iOS
• Android 4.0+

Links

• Home Page
• Developer Instruction
• React components