基于 React.js 的移动端 Web UI 组件库。
Amaze UI Touch 专为移动打造,在技术实现、交互设计上只考虑主流移动设备,保证代码轻、性能高。
只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。
使用 Flexbox 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局。
基于风靡社区的 React.js 封装组件,沿袭高性能、可复用、易扩展、一处学习多端编写特性。
-
从 npm 安装:
npm install --save-dev amazeui-touch
-
使用 组件:
class App extends React.Component { constructor(props) { super(props); this.state = { said: false, }; this.handleClick = this.handleClick.bind(this); } 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 amStyle="primary" disabled={said} onClick={this.handleClick} > {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/amazeui/amazeui-touch.git
在源码目录下执行:
npm install
-
启动开发服务:
npm start
相关文件构建完成后会自动打开浏览器,可查看文档及组件演示。
npm run build
打包后的文件位于 dist
目录下。
MIT © 2015 - 2016 AllMobilize Inc.