@baic/yolk-web-ui

yolk的web平台常用UI场景组件

使用

yarn add @baic/yolk-web-ui

API

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});

预览图片