@baic/yolk-web-ui v1.0.75
@baic/yolk-web-ui
yolk的web平台常用UI场景组件
使用
yarn add @baic/yolk-web-uiAPI
DatePicker
折叠控件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| autoFixDate | 输入框自动补全修复日期 | boolean | - |
Collapse
折叠控件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | ReactNode | - |
| toolbar | 标题工具栏 | ReactNode | - |
| keepAlive | 折叠之后是否保持Dom | boolean | - |
| defaultCollapse | 折叠默认值 | boolean | true |
| collapse | 控制折叠 | boolean | - |
| onCollapse | 折叠事件 | function | - |
Flex
布局组件，css的flex参数化组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| inline | 等于inline-flex | boolean | - |
| direction | 等于flex-direction | column | row | column-reverse | row-reverse | - |
| alignItems | 等于align-items | start | center | end | - |
| alignContent | 等于align-content | start | center | end | - |
| justifyContent | 等于justify-content | start | center | end | - |
| wrap | 等于flex-wrap: wrap; | boolean | wrap | wrap-reverse | - |
| width | 适应宽度 | none | auto | ReactText | auto |
Grid
Flex组件网格化衍生
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 显示数据 | GridDataItem[] | - |
| span | 列数 | number | 3 |
| ellipsis | 是否过长省略 | boolean | - |
| size | 尺寸 | small | middle | large | middle |
| defaultLabelWidth | 参见Flex | 参见Flex | 30 |
| defaultValueWidth | 参见Flex | 参见Flex | auto |
| defaultLabelAlignItems | 参见Flex | 参见Flex | center |
| defaultValueAlignItems | 参见Flex | 参见Flex | center |
| defaultLabelJustifyContent | 参见Flex | 参见Flex | center |
| defaultValueJustifyContent | 参见Flex | 参见Flex | - |
| bordered | 是否有边框 | boolean | - |
| itemDirection | 单项排列方向 | vertical | horizontal | horizontal |
GridDataItem
Grid的data参数类型
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 显示数据 | ReactNode | - |
| value | 显示数据 | ReactNode | - |
| width | 参见Flex | 参见Flex | - |
| labelWidth | 参见Flex | 参见Flex | - |
| valueWidth | 参见Flex | 参见Flex | - |
| labelAlignItems | 参见Flex | 参见Flex | - |
| valueAlignItems | 参见Flex | 参见Flex | - |
| labelJustifyContent | 参见Flex | 参见Flex | - |
| valueJustifyContent | 参见Flex | 参见Flex | - |
| labelTooltip | 省略提示 | boolean | - |
| valueTooltip | 省略提示 | boolean | - |
| required | 是否显示必填 | boolean | - |
LinkButton
链接化按钮组件
LinkButton.Group
链接按钮组
LinkButton.Merge
链接按钮合并组
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 合并以后标题 | ReactNode | 更多 |
Loading
absolute的加载组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| node | loading的组件 | ReactNode | - |
Required
必填组件
SearchLayout
查询条件布局
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| data | 显示数据 | ReactNode(FormItem、createFormItem组件) | - |
| span | 列数 | number | 3 |
| spanMediaMinWidth | 列数自适应减1的最小宽度 | number | 800 |
| toolbar | 工具栏 | ReactNode | - |
| allowCollapse | 是否允许折叠 | boolean | true |
| collapse | 折叠 | boolean | true |
| searchContent | 查询文案 | ReactNode | 查询 |
| resetContent | 重置文案 | ReactNode | 重置 |
| collapseContent | 折叠文案 | ReactNode | function | 高级查询 |
| onSearch | 查询按钮事件 | function | - |
| disabledSearch | 禁用折叠 | boolean | - |
| onReset | 重置按钮事件 | function | - |
| onCollapse | 折叠事件 | function | - |
| form | 表单实例 | FormInstance | - |
| toolbarFollow | 工具栏跟随 | boolean | - |
| toolbarFlexProps | toolbar的Flex参数 | FlexProps | - |
Title
标题
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| prefix | 前缀 | boolean | - |
| divider | 隔线 | boolean | - |
| toolbar | 工具栏 | ReactNode | - |
Wrapper
内容容器，合并Modal、Drawer、内嵌页面
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| mode | 模式 | boolean | page | inline | modal |
| title | 标题 | ReactNode | - |
| width | 宽度 | ReactText | - |
| onOk | 确定事件 | function | - |
| onCancel | 关闭事件 | function | - |
| footer | 页脚 | ReactNode | - |
Input
输入组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| formatter | 格式化 | function | - |
| filter | 过滤 | function | - |
| tooltip | 实际内容提示 | boolean | - |
| edit | 是否是编辑模式 | boolean | - |
| onReadonly | 非编辑模式转换 | function | - |
NumberInput
Iput的数字组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| decimal | 精度 | number | - |
| zeroStart | 是否允许0开头 | boolean | - |
| negative | 是否可为负 | boolean | - |
MobileInput
NumberInput的金额组件的mobile组件
BankInput
NumberInput的金额组件的银行卡号组件
Iconfont
与Provider配合的iconfont资源组件
Table
antd.Table的扩展
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| toolbar | 列表上方工具位 | ReactNode | - |
| transformEmptyData | 空数据转换方式 | boolean | function | true |
| dragSort | 开启拖拽排序功能 | boolean | DragSort | - |
| floatFooter | 开启浮动footer | boolean | - |
| virtual | 列表虚拟化 | boolean | - |
Table.createDragSortComponent(node: ReactNode);
开启dragSort之后，自定义拖动触发组件
Table.Props'columns'
columns的扩展
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 颜色 | CSSProperties'color' | - |
| tag | 包裹Tag标签 | boolean | TagProps | - |
| unit | 标题单位 | ReactNode | - |
| ellipsis | 原ellipsis扩展 | boolean | number | function | - |
| formatter | 标题单位 | function | - |
| fontWeight | 字体粗细 | CSSProperties'fontWeight' | - |
PagingTable
Table的分页组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| url | 请求接口 | string | - |
| data | 请求参数 | object | - |
| onRequestParams | 转换请求参数 | function | - |
| defaultCurrent | 默认分页开始 | number | - |
| defaultPageSize | 默认每页长度 | number | - |
| formatResult | 请求转换分页数据 | function | - |
| formatPagingParams | 请求转换分页参数 | function | - |
| onRequestSuccess | 请求成功事件 | function | - |
| emptyDataSourceBackCurrent | 如果dataSource为空数组，检查当前 pagination.current > 1 重新刷新 | function | - |
SearchTable
Table的查询分页组件，参见PagingTable参数
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| form | 表单实例 | FormInstance | - |
| search | SearchLayout的data参数(注：因为与查询依赖，建议使用useCallback) | function | ReactNode | - |
| searchProps | SearchLayout参数 | SearchLayoutProps | - |
| onSearch | 查询事件 | function | - |
| onReset | 重置事件 | function | - |
| emptyDataSourceBackCurrent | 如果dataSource为空数组，检查当前 pagination.current > 1 重新刷新 | function | - |
QrCode
二维码组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 转换二维码字符串 | string | - |
BarCode
条形码组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 转换条形码字符串 | string | - |
TimerButton
倒计时按钮
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| formatter | 倒计时内容格式化 | function | - |
| onClick | 点击事件 | function | - |
| onBeforeClick | 点击触发前事件 | function | - |
| time | 倒计时时间 | number | - |
ImagePreview
图片预览
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| visible | 是否显示 | boolean | - |
| icons | 按钮 | object | - |
| onClose | 关闭事件 | function | - |
| urls | 图片组 | string[] | - |
| current | 当前图片 | string | - |
Provider
用于当前库的全局默认定义
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| antdConfigProps | antd.ConfigProvider参数 | ConfigProviderProps | - |
| inputMaxLength | 输入组件默认长度 | number | - |
| textareaMaxLength | 输入组件默认长度 | number | - |
| iconfontScriptUrl | Iconfont资源来源 | string | string[] | - |
| titleProps | Title组件参数 | TitleProps | - |
| gridProps | Grid组件参数 | GridProps | - |
| wrapperGetContainer | Wrapper组件inLine的container | function | - |
| tableProps | Table参数 | TableProps | - |
| rangeNumberProps | RangeNumber参数 | RangeNumberProps | - |
| searchLayoutProps | SearchLayout参数 | SearchLayoutProps | - |
| linkButtonDivider | 是否取消LinkButton的分割线 | boolean | - |
RangeNumber
Input的数字组件的区间组件
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| shouldEqual | 是否允许相等 | boolean | true |
Util
yolk-web的Util扩展
Util.previewImage({urls: string[], current?: string});
预览图片
4 months ago
8 months ago
7 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago