ezui-react v0.0.3

React-EZUI

一套基于React的web通用组件UI集合

Installation

npm

$ npm install ezui-react

dev build

git clone https://github.com/efe-team/ezui-react.git
cd ezui-react
npm install
npm run start

dev publish

git clone https://github.com/efe-team/ezui-react.git
cd ezui-react
npm install
npm run publish

Quick Start

import { Button, Message } from 'ezui-react';

<Button type="primay">Btn demo</Button>

Document

Button

Button Usage

// 引入
import Button from 'ezui-react';

// 基本使用
<Button>按钮示例</Button>

// 主题按钮
<Button type="default">默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="warn">警示按钮</Button>
<Button type="danger">危险按钮</Button>

// 禁用
<Button disabled>禁用</Button>
// 自定义配置按钮宽高
<Button width={200} height={50}>按钮示例</Button>
<Button  width="200px" height="50px">按钮示例</Button>
// 自定义边框
<Button borderRadius="10%">按钮示例</Button>
<Button borderRadius="10px">按钮示例</Button>
// Event 事件监听
<Button
  value="value"
  onClick={ (e) => {
    e.preventDefault();
    console.log(e.target.value);
  }}
>
  按钮示例
</Button>

/** 更多功能 **/
// 图标按钮
<Button><Icon color="red" type="caret-left" /></Button>
<Button><Icon color="red" type="caret-right" /></Button>

Button API

Message

Message Usage

// 引入
import Message from 'ezui-react';

// 基本使用
Message.show('提示消息');

// 状态提示
Message.success('操作成功');
Message.error('操作失败');
Message.warning('警告信息');

/** 更多功能 **/
// 主题
Message.show({
  content: '主题提示',
  theme: 'dark', //支持light, dark两种主题，默认为light
});

// 配置图标，时长
Message.show({
  content: '图标提示',
  icon: 'loading1', // 图标类型,可选值详见图标组件
  iconStyle：{样式对象} // 图标样式（可选）
  timeout: 2000,   // 自动关闭时长
});

// 异步关闭
// 异步关闭 - 开启
Message.show({
  content: '手动关闭， 通过执行，Message.close()；',
  autoClose: false,
});
// 异步关闭 - 关闭
Message.close();

Message API

Paginationation

Paginationation Usage

// 引入
import Pagination from 'ezui-react';

// 基本使用
<Pagination
  total={400}
  pageSize={10}
/>

// 页码点击回调事件
<Pagination
  total={400}
  onChange = { (current, pageSize) => console.log("点击" + current + "页" + "每页展示"+pageSize+"个元素。")}
/>
// 页码状态值
<Pagination
  total={400}
  current={this.state.current}  // 当前页码将保持同步this.state.current值
/>
// 自定义图标
<Pagination
  total={400}
  prevIcon={<Icon color="green" type="caret-left" />} //更多图标参考Icon组件，也可传入任意ReactNode
  nextIcon={<Icon color="green" type="caret-right" />}
/>

Paginationation API

Table

Table Usage

// 引入
import Table from 'ezui-react';

/** 基本使用 **/

// 数据
const data = [
  { props0: 'Jack', props1: 28, props2: 'some where', key: '1' },
  { props0: 'Rose', props1: 36, props2: 'some where', key: '2' },
  { props0: 'Jack', props1: 28, props2: 'some where', key: '3' },
];
// 表格列
const columns = [{
  title: '列1', dataIndex: 'props0', key:'props0', width: 100,
}, {
  title: '列2', dataIndex: 'props1', key:'props1', width: 100,
}, {
  title: '列3', dataIndex: 'props2', key:'props2'
}];

// 表格渲染
<Table
  columns={columns}
  data={data}
/>
/** 表格元素自定义 **/
// 表格列 
const columns1 = [{
  title: '列1', dataIndex: 'props0', key:'props0', width: 100,
}, {
  title: '列2', dataIndex: 'props1', key:'props1', width: 100,
}, {
  title: '列3', dataIndex: 'props2', key:'props2', render: (text, record) => <Button href="#" type="primary">{record.props1}</Button>
}];
// 表格最后一列将渲染为自定义的ReactNode组件 
<Table
  columns={columns1}
  data={data}
/>

/** 表格修饰性配置- 边框，跨行条纹等配置 **/

<Table
  columns={columns}
  data={data}
  bordered // 表格展示边框
  center  // 表格单元格内容居中
  striped // 表格跨行条纹效果
/>
/** 表格分页 **/

<Table
  columns={columns0}
  data={data0}
  pagination={{  // pagination 完全继承Pagination组件，更多分页配置参考 Pagination
    total: 100,
    pageSize: 10,
    onChange: (current, pageSize) => console.log("当前选择页" + current+ "每页" + pageSize+ '条')
  }}
/>

/** 表格可展开 **/

<Table
  columns={columns}
  data={data}
  expandedRowRender={(record, index, indent, expanded) => { // 
    return  expanded ? <p>extra: {record.props0}</p> : null;
  }}
/>
// 状态控制当前展开行
<Table
  columns={columns}
  data={data}
  expandedRowRender={(record, index, indent, expanded) => { 
    return  expanded ? <p>extra: {record.props0}</p> : null;
  }}
  expandedRowKeys={this.state.expandedRowKeys} //表格展开行与this.state.expandedRowKeys同步
/>

Table API