ezui-react

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	-	自定义样式类名，额外添加到组件类名后