ant-seed-ui

Ant Seed UI Toolkit based on Ant Design and React

Usage no npm install needed!

<script type="module">
  import antSeedUi from 'https://cdn.skypack.dev/ant-seed-ui';
</script>

README

ant-seed-ui

Ant seed UI Toolkit based on Ant Design and React

初衷

  • 在 antd 上封装一层,项目中不引用antd,方便以后将antd替换
  • 业务大组件封装,方便快速开发,风格统一

设计

  • JSON In, JSON Out
    • 组件参数接收 配置 JSON
    • 组件回调输出 结果 JSON
  • 默认值覆盖大多数情况
  • 尽量可自定义满足少数情况

组件

  • NavFrame
    • layout
    • menus
    • pageLinks
    • title
    • actions
  • Form
    • forms 必填 , 为Object的数组, Object字段如下
      • key 必填
      • label 必填
      • type
        • input default
        • add 动态添加
        • header
        • info
        • select
        • textArea
        • date
        • checkbox
        • radio
        • rangeDate
        • month
      • placeholder
      • required
        • bool
        • function
      • reg
        • pattern
        • message
      • value
      • disabled
      • alwaysEnable
      • meta type为select时有效
        • ref
          • 表单联动时需要参考的字段的 key
        • mode
          • undefined default
          • tags
          • multiple
        • data function / array
          • 若有ref配置,function的参数 refValue 为参考字段的值
        • showSearch
      • addLabel type为add时有效
      • addKeys type为add时有效
        • 需要动态添加的字段的key值的数组
      • showTime type为date时有效
      • onChange
      • data type为select时有效
    • accessoryComponent
      • 函数
      • 可返回不受表单控制的附加 UI,
      • 参数为函数 getFormItem,可返回受表单控制的自定义UI
      • getFormItem 接收参数为Object, Object 字段如下
        • label必填
        • key必填
        • value
        • required
        • reg
    • onSubmit,参数如下
      • values
        • JSON Out
      • clear
        • 函数,调用可清空表单
    • onReset
      • 重置表单回调
    • layout
      • columnCount
        • 默认列数
      • rowColCounts
        • 每行列数的数组
        • 若数组列数之和小于所有表单字段数,数组最后一项的列数为之后剩余字段的布局列数
      • actionDirection
        • 页末操作按钮的位置
        • left
        • center
        • right
      • labelPostion
        • 字段Label的位置
          • left
          • top
      • . . . . . .
    • disableEnterSubmit
    • … …
  • Table
    • columns 必填, 为Object的数组, Object字段如下
      • title 必填
      • dataIndex必填
      • editable
        • bool
        • function
      • type editable 为 true时有效
        • input default
        • select
        • tags
        • multiple
      • meta type 为 select tags multiple 时有效
        • ref
          • 可以参考 Table 同 Row 的其他列字段,与之联动
        • data function / array
          • 若有ref配置,function的参数 refValue 为参考字段的值
      • required
      • disabled
      • fixed
      • width
      • reg
        • pattern
        • message
      • actions
        • label 必填
        • callback
          • 接收参数 text, record, index
        • show bool / function
          • 函数时接收参数 text, record, index
          • 函数时需返回bool
        • confirm
        • confirmLabel
    • dataSource 必填
    • onCellSave editable为true时回调
    • scrollWidth
      • 建议指定为大于表格宽度的固定值或百分比, 如 1000
      • 配合 fixed column 或 floatingScrollDomQuery 使用
    • floatingScrollDomQuery
      • 一般为 ".ant-table-scroll .ant-table-body",使滚动条 floating
    • pagination
      • 参考 antd 的 pagination
    • onChange
      • 参数 pagination, filters, sorter
      • 主要用 pagination 进行分页
    • columnsConfigGlobalTableKey
      • 列配置的开启并指定全局唯一key(建议:项目唯一性简称+功能Model名+页面名+Table名等),用于缓存
    • . . . . . .
  • . . . . . .

Install

npm install --save ant-seed-ui

Usage

import React, { Component } from 'react'

import { Button } from 'ant-seed-ui'

class Example extends Component {
  render () {
    return (
      <Button title="Default"/>
    )
  }
}

License