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

属性名|类型|默认值|描述 ---|:--:|---:|---: type|string|default|提供的几种默认按钮主题，可选default, primary, warn, danger disabled| boolean| false| 是否禁用 width| number/string| auto |按钮自定义宽度，默认为宽度为auto，最小宽度32px height| number/string |auto |按钮自定义高度，默认为高度为auto，最小高度32px borderRadius| number/string| 4px| 按钮自定义圆角值 value| number/string/array| null |原始属性， 按钮值，value赋值后可绑定在e.target.value中，作为点击事件钩子 className| string| -| 自定义样式类名，额外添加到组件类名后

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

属性名|类型|默认值|描述 ---|:--:|---:|---: content| string|ReactNode |-| 提示内容 theme| string| light| 提示框主题，支持dark ,light两种主题 icon| string| auto| 自定义弹窗图标,更多图标类型参考Icon组件 iconStyle| object |null| 自定义图标样式对象 timeout| number| 2000| 自定义提示框展示时长，默认2000毫秒 autoClose| boolean| false| 是否自动关闭提示框，如置为true,可通过API执行Message.close()关闭 className| string| - | 自定义样式类名，额外添加到组件类名后

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

属性名|类型|默认值|描述 ---|:--:|---:|---: current |number| undefined |当前页码 defaultCurrent |number 1 初始化默认页码 pageSize| number| 10| 每页展示个数，判断分页数依据之一 total |number |0| 总数，判断分页数依据之一 onChange| Function(current, pageSize) |-| 页码点击回调函数，参数为当前点击页码值current，每页个数pageSize className| string - 自定义样式类名 prevIcon| ReactNode 默认左箭头, |分页器左按钮content nextIcon| ReactNode| 默认右箭头, |分页器右按钮content className |string | -| 自定义样式类名，额外添加到组件类名后

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

属性名|类型|默认值|描述 ---|:--:|---:|---: data| array |[]| 表格数据源 columns |array| - |定义表格的列，每一列可定义唯一key值，表格数据索引dataIndex,列标题名称，宽度，渲染结果（详见columns API） bordered| boolean |false| 表格数据是否展示边框 center| boolean |false| 表格内容是否需要居中展示 striped |boolean| false |表格跨行条纹效果 showHeader| boolean| false| 是否隐藏表格标题，仅展示数据 borderRadius| number/string| 4px| 按钮自定义圆角值 pagination| boolean/object| null |表格分页器，置为false， 表示不展示分页，pagnition属性完全继承Pagination组件，详细配置见Pagination expandedRowRender| Function(record, index, indent, expanded) => ReactNode| null| 表格展开内容，根据当前数据值record, 索引index，缩进值indent,是否已展开expanded 渲染展开内容ReactNode defaultExpandedRowKeys |string|[]| - |该值可同步当前展开的表格行 className |string| - | 自定义样式类名，额外添加到组件类名后