amazeui-dingtalk

钉钉UI

基于 React.js 的移动端 Web UI 组件库。

入门套件

简介

专属于移动

钉钉UI 专为移动打造，在技术实现、交互设计上只考虑主流移动设备，保证代码轻、性能高。

专注于 UI

只提供 UI 组件（View），对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。

采用 Flexbox

使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局。

基于 React.js

基于风靡社区的 React.js 封装组件，沿袭高性能、可复用、易扩展、一处学习多端编写特性。

安装使用

1. 从 npm 安装：

   npm install --save-dev amazeui-dingtalk
   

2. 使用 组件：

   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 钉钉UI.</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 编译参见 钉钉UI Starter Kit。

开发及演示

文档及演示

1. 全局安装 gulp.js：

   npm install -g gulp
   

2. 克隆源代码并安装依赖：

   git clone https://github.com/amazeui/amazeui-dingtalk.git
   

   在源码目录下执行：

   npm install
   

3. 启动开发服务：

   npm start
   

   相关文件构建完成后会自动打开浏览器，可查看文档及组件演示。

构建

npm run build

打包后的文件位于 dist 目录下。

反馈建议

License

MIT © 2015 - 2016 AllMobilize Inc.