基于 React.js 的移动端 Web UI 组件库。
Amaze UI Touch 专为移动打造,在技术实现、交互设计上只考虑主流移动设备,保证代码轻、性能高。
只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。
使用 Flexbox 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局。
基于风靡社区的 React.js 封装组件,沿袭高性能、可复用、易扩展、一处学习多端编写特性。
-
从 npm 安装:
npm install --save-dev amazeui-touch
-
使用 组件:
import React from 'react'; import ReactDOM from 'react-dom'; import { Button, } from 'amazeui-touch'; const App = React.createClass({ getInitialState() { return { said: false, }; }, handleClick() { this.setState({ said: true, }); }, renderHello() { return this.state.said ? ( <p>Hello World! Welcome to Amaze UI Touch.</p> ) : null; }, render() { const said = this.state.said; const text = said ? 'Said :(' : 'Say hello :)'; return ( <div> <Button disabled={said}>{text}</Button> {this.renderHello()} </div> ); } }); ReactDOM.render(<App />, document.getElementById('root'));
ES2015/JSX 编译参见 Amaze UI Touch Starter Kit。
-
全局安装 gulp.js:
npm install -g gulp
-
克隆源代码并安装依赖:
git clone https://github.com/allmobilize/amazeui-touch.git
在源码目录下执行:
npm install
-
执行 gulp:
gulp
相关文件构建完成后会自动打开浏览器,可查看文档及组件演示。
MIT © 2015 AllMobilize Inc.