erc-ui
v1.0.2
Published
qeeq ui components
Maintainers
Readme
QEEQ-UI
Dialog
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | visible | boolean | 是否展示 | | title | React.ReactNode | 蓝色header的标题,没有标题就是白色header | | width | number | 宽度 | | height | number | 高度 | | maskClosable | boolean | 点击蒙层是否关闭弹窗 | | closable | boolean | 是否出现关闭按钮 | | style | React.CSSProperties | 外层div样式 | | className | string | 外层div类名 | | onClose | Function | 点击关闭按钮回调 | | okText | string | footer确认按钮文案 | | cancelText | string | footer取消按钮文案 | | onOk | Function | 点击底部确认按钮回调 | | onCancel | Function | 点击底部取消按钮回调 | | confirmLoading | boolean | footer确认按钮是是否处于loading状态 |
createDialog
参数与上面Dialog的一致
createDialog({
title: '弹窗标题',
content: '弹窗内容',
width: 700,
height: 200
})Button
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | type | string | 按钮类型:primary、ghost、dashed、link | | height | string | 按钮高度:24、32、36、40、50 | | onClick | Function | 点击按钮回调 | | className | string | 按钮类名 | | loading | boolean | 按钮是否处于loading状态 | | isBlock | boolean | 按钮是否跟随父元素宽度扩展 |
Loading
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | loading | boolean | 是否处于loading状态 | | children? | React.ReactNode | loading包裹元素 | | className? | string | loading icon类名 | | wrapperClassName? | string | 外层类名 | | style? | React.CSSProperties | 外层样式 | | size? | string | "small"、"default"、"large" | | tip? | string | loading下方的提示文案 |
Input
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | size? | string | small、middle、large | | type? | string | text、email、hidden、password | | error? | boolean、string | 错误提示 | | validator? | Function | 函数接收参数为当前表单值value,返回为错误信息 | | onPressEnter? | Function | 回车回调 | | onChange? | Function | value改变回调 | | ref? | React.RefCallback | 获取input的dom元素 | | isSubmitting? | Boolean | 是否正在提交中 |
Tip
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | trigger? | string | hover、click | | content | string、React.ReactNode | tip内容 | | defaultVisible? | boolean | 是否默认展示 | | visible? | boolean | 外部控制tip可见 | | delay? | number | tip展示延迟 | | placement? | string | Placement | | style? | React.CSSProperties | trigger的样式 | | wrapperClassName? | string | trigger类名 | | tipClassName? | string | tip内容的类名 | | children | React.ReactElement、string | trigger内容 | | theme? | string | dark、light |
Placement: 'top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom'
Tab、TabPane
Tab
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | className? | string | 外层类名 | | style? | React.CSSProperties | 外层样式 | | children | React.ReactNode | | | defaultKey | string | 默认tab的key值 | | destroyHiddenPane | boolean | 隐藏测tab移除内容 | | theme | string | card、underline |
TabPane
| 参数名 | 类型 | 说明 | | ---- | ---- | ---- | | tabName | string | tab名称 | | tabKey | string | 表示tab的key值 | | className | string | tab pane的类名 | | style | React.CSSProperties | tab pane样式 | | children | React.ReactNode | tab pane 内容 | | active | boolean | 当前tabpane是否选中 |
使用🌰
<Tabs
defaultKey="22"
onChange={(item: any) => {
console.log('点击item', item)
}
}>
<TabPane key="11" tabName="123123">
123123
</TabPane>
<TabPane key="22" tabName="qweqwe">
qweqwe
</TabPane>
</Tabs>