neo-ui

Mr_Andsen發表於2019-01-24

一款基於react的UI框架,採用元件分級化思想,將元件分為低階級元件,中階元件,高階元件。

預覽地址 www.wetalks.cn/neo-ui/

開發模式

低階元件 :Components 部分,屬於最底層的元件,跟業務毫無關聯,只實現最基礎應有的功能,比如Button, input, select等。將其封裝暴露出該有的方法和屬性,供更高階的元件呼叫。

中階元件 :Parts 部分,屬於互動層的組合元件,實現一些特定業務需求的元件,比如TablePart,EditPart,SearchPart等。將其封裝暴露出該有的方法和屬性,供更高階的元件呼叫。

高階元件 :Templates 部分,屬於最上層的元件,頁面級的應用,通常是將中階元件和低階元件組合使用,來實現某些業務場景的互動和頁面。

安裝

推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。

npm install
複製程式碼

快速上手

import ReactDOM from 'react-dom';
import React , { Component }from 'react';
import {Components, Parts, utils} from 'neo';
const { Buttons, Input, Modal } = Components;
class Info extends Component {
    constructor(props) {
      super(props);
      this.state = {
          confirmDirty: false,
      };
    }
    render(){
        return (<Buttons
                text="confirm"
                type={'primary'}
                style={{'marginTop':'20px'}}
                onClick={() => { Modal.confirm({ title: 'warning', content: 'this is a warning', type: 'small' }, () => { alert('this is sure callback'); }, () => { alert('this is cancle callback'); }); }}
              />)
    }
複製程式碼

效果圖

neo-ui neo-ui neo-ui
neo-ui neo-ui neo-ui
neo-ui neo-ui