1.0.2 • Published 3 years ago
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>