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

预览图片