ufec
v2.1.0
Published
ustack front end component
Downloads
80
Readme
ufec
一个基于antd实现的一套组件封装,用于开发管理平台面板。配置 = 界面。
暂时没有比较详尽的组件使用文档,但是我们基于ufec构建了一个完善的管理平台面板,模拟了一些使用场景,通过查看源代码即可清晰的知道组件的用法。
模拟平台: http://ufec.tfcloud.com/
安装
npm i ufec --save
External
Ufec依赖一些库,你需要保证你的上下文中有以下这些库:
- React
- React-dom
- React-dom-router
- antd
Api
Main
Main layout.
import {Main} from 'ufec';
ModalV2
弹出框主逻辑,支持通过json文件配置Subs
中的子组件,并且支持自动验证.
ModalPlus
和ModalV2
逻辑相同,只是样式不一样,大弹出框.
ModalDelete
包含删除逻辑的弹出框.
ModalAlert
弹出消息/提醒/确认等信息的弹出框.
SideMenu
菜单组件.
Subs {Object}
Subs包含着一些小组件,这些子组件和Modal配合使用可以通过配置来进行组件验证。
- alert
- alertWithClick
- autoComplete
- checkbox
- checkboxTable
- codemirror
- datePicker
- iconLabel
- input
- inputNumber
- multipleChoice
- multistageTabs
- radio
- select
- slider
- steps
- switch
- text
- treeSelect
import {Subs} from 'ufec';
const Steps = Subs.Steps;
history
React-router的状态管理.
import { history } from 'ufec';
history.push(xxx);
history.getPathList();
...
Style
组件的样式需要另外引入.
@import '~ufec/style/index.less';
Cli
Ufec 有一些命令行的操作.
你可以输入 node_modules/.bin/ufec -h
来查看ufec都支持哪些操作。
初始化svg图片。
因为ufec本身有一些icon要支持,所以在初始化一个项目的时候,可以使用这个命令把ufec所需要的svg复制到目标文件夹中,比如:
ufec --svg client/iconfonts/svgs/ufec
上边这个命令会把ufec需要的svg图片都复制到client/iconfonts/svgs/ufec
这个文件夹中。
打包i18n json文件
这个命令会把client
文件夹下所有目录的lang.json
打包合成一个${app}.lang.json
,然后放到client/locale
文件夹中。
ufec --transpile
当然,这个脚本也接受npm参数,如果你把这个脚本放在package.json
的scripts
中,比如:
{
"scripts": {
"transpile": "ufec --transpile"
}
}
那么,你可以通过传入npm参数来指定生成什么语言的文件。比如:
npm run transpile --lang=en
这样会生成英文lang文件,不传的默认生成中文lang文件。
LICENSE
MIT © TFCloud