Neophobe Plebeian Mumpsimus

    reacteasyui

    1.0.5 • Public • Published

    ReactEasyUI

    ReactEasyUI 是一个基于 React 的常用组件库,封装了日期、列表、图表等常见使用场景,由 易车前端团队 倾力打造。

    官方网站:https://reacteasyui.github.io

    安装

    ReactEasyUI 依赖于 React,若未安装 React,须先 安装 React

    然后安装 ReactEasyUI。

    npm install reacteasyui --save-dev

    文件引入

    CSS 引入

    ReactEasyUI 组件样式依赖 Bootstrap 与 ReactEasyUI.css。

    <link src="../css/lib/bootstrap/3.3.5/bootstrap.min.css" rel="stylesheet">
    <link src="../css/lib/ReactEasyUI.css" rel="stylesheet">
    

    Javascript 引入

    lib.js 集成了 ReactEasyUI 需要的 jQuery.js(1.12.2+)、bootstrap.js(3.3.5+)、jsfunction.js 三个文件,echarts.js 在图表组件中需要。

    <script href="../js/lib/lib.js"><script>
    <script href="../js/lib/echarts.js"><script>
    

    使用

    通过如下方式引入 React 与 ReactEasyUI。

    import React from 'react';
    import * as RE from 'reacteasyui';
    

    然后就可以通过 <RE.PluginName /> 的方式来使用 ReactEasyUI 组件了,例如使用 SwitchBtn 组件,则代码如下。

    <RE.SwitchBtn
        name="clue_time"
        text={["On","Off"]}
        active="true"
    />
    

    具体组件的使用方法,请查看组件文档页面。

    项目内容

    ReactEasyUI 组件库包含多种常用组件,如 基础组件日期组件表格组件图表组件进度与比例图组件 等。

    ReactEasyUI 源码包含有预先编译的 CSS、JavaScript 和图标字体文件,以及 SASS、JavaScript 和文档的源码,主要文件结构如下:

    ReactEasyUI/
    ├─ src/
    ├── css/plugin/
    │   ├── Base
    │   │   ├── AutoComplete.scss
    │   │   ├── FreeCheckBox.scss
    │   │   └── TextWithCount.scss
    │   ├── Date
    │   │   ├── AppCalendar.scss
    │   │   ├── Calendar.scss
    │   │   ├── DateChooser.scss
    │   │   └── DateRangePicker.scss
    │   ├── ECharts
    │   │   └── LineAndPopupChart.scss
    │   ├── List
    │   │   └── Table.scss
    │   ├── Progress
    │   │   ├── Compare.scss
    │   │   ├── ProgressBar.scss
    │   │   └── Ring.scss
    ├── js/plugin/
    │   ├── Base
    │   │   ├── AutoComplete.jsx
    │   │   ├── DelIconInput.jsx
    │   │   ├── FreeCheckBox.jsx
    │   │   └── TextWithCount.jsx
    │   ├── Cloud
    │   │   └── Cloud.scss
    │   ├── Date
    │   │   ├── AppCalendar
    │   │   ├── DateRangePicker
    │   │   ├── Calendar.jsx
    │   │   └── DateChooser.jsx
    │   ├── ECharts
    │   │   ├── Chart.jsx
    │   │   ├── DoubleYLineChart.jsx
    │   │   ├── HorizontalBar.jsx
    │   │   ├── Line.jsx
    │   │   ├── LineAndPopupCharts.jsx
    │   │   ├── MapChart.jsx
    │   │   ├── MultipleBar.jsx
    │   │   ├── Pie.jsx
    │   │   ├── PieAndLineChart.jsx
    │   │   ├── PieWithLabel.jsx
    │   │   ├── Scatter.jsx
    │   │   ├── SimpleBar.jsx
    │   │   └── VerticalBar.jsx
    │   ├── List
    │   │   └── Table.jsx
    │   ├── Progress
    │   │   ├── Compare.jsx
    │   │   ├── Loading.jsx
    │   │   ├── PieChart.jsx
    │   │   ├── Progress.jsx
    │   │   ├── ProgressBar.jsx
    │   │   ├── ProgressChart.jsx
    │   │   └── Ring.jsx
    ├── images/
    ├─ dev/
    └─ build/
    

    css/js/font/ 目录分别包含了 CSS、JS 和字体图标的源码。dev/ 目录包含了预编译 ReactEasyUI 包内的所有文件。js/plugin/ 包含了所有文档的源码文件,js/component/ 目录是 ReactEasyUI 提供的实例工程。

    Install

    npm i reacteasyui

    DownloadsWeekly Downloads

    1

    Version

    1.0.5

    License

    ISC

    Last publish

    Collaborators

    • babyisun