未验证 提交 b72194c4 编写于 作者: L libin0824 提交者: GitHub

feat: DIalog组件增加在线调试能力,文档多语言支持 (#193)

上级 68cca78e
# Dialog 对话框 # Dialog
### 介绍 ### introduce
模态对话框,在浮层中显示,引导用户进行相关操作,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作 Modular dialog box, displayed in the floating layer, guides users to perform related operations, often used in message prompts, message confirmation, or complete specific interaction operations on the current page
弹出框组件支持函数调用和组件调用两种方式。 The pop -up box components support the function call and component call.
### 安装 ### Install
```js ```js
import { Dialog } from '@nutui/nutui-react' import { Dialog } from '@nutui/nutui-react'
``` ```
## 代码演示 ## Code demonstration
### 函数式调用 ### Functional call
:::demo
```tsx ```tsx
<Cell title="基础弹框" onClick={() => { import React from "react";
Dialog.alert({ import { Cell,Dialog } from '@nutui/nutui-react';
title: '基础弹框',
content: '支持函数调用和组件调用两种方式。' const App = () => {
}); return (
}}></Cell> <>
<Cell title="无标题弹框" onClick={() => { <Cell title="Basic bullet" onClick={() => {
Dialog.alert({
title: 'Basic bullet',
content: 'Support function calls and module call.'
});
}}>
</Cell>
<Cell title="Non -title bullet box" onClick={() => {
Dialog.alert({
content: 'Non -title bullet box'
});
}}>
</Cell>
<Cell title="Prompt bomb frame" onClick={() => {
Dialog.alert({ Dialog.alert({
content: '无标题弹框' title: 'Kind tips',
}); content: 'Support function calls and module call.',
}}></Cell> noCancelBtn: true
<Cell title="提示弹框" onClick={() => { });
Dialog.alert({ }}>
title: '温馨提示', </Cell>
content: '支持函数调用和组件调用两种方式。', <Cell title="The bottom button is called vertically" onClick={() => {
noCancelBtn: true Dialog.alert({
}); title: 'Kind tips',
}}></Cell> content: 'Support function calls and module call.',
<Cell title="底部按钮 垂直调用" onClick={() => { footerDirection: 'vertical'
Dialog.alert({ });
title: '温馨提示', }}>
content: '支持函数调用和组件调用两种方式。', </Cell>
footerDirection: 'vertical' </>
}); )
}}></Cell> }
export default App;
``` ```
### 组件调用 :::
### Module call
:::demo
```tsx ```tsx
const [visible1, setVisible1] = useState(false); import React from "react";
const [visible2, setVisible2] = useState(false); import {useState} from 'react'
import { Cell,Dialog } from '@nutui/nutui-react';
return <>
<Cell title="基础弹框" onClick={() => setVisible1(true)} /> const App = () => {
<Dialog const [visible1, setVisible1] = useState(false);
title="组件调用" const [visible2, setVisible2] = useState(false);
visible={visible1} return (
onOk={() => setVisible1(false)} <>
onCancel={() => setVisible1(false)} <Cell title="Basic bullet" onClick={() => setVisible1(true)} />
> <Dialog
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。 title="Module call"
</Dialog> visible={visible1}
<Cell title="底部按钮 垂直调用" onClick={() => setVisible2(true)} /> onOk={() => setVisible1(false)}
<Dialog onCancel={() => setVisible1(false)}
title="组件调用" >
visible={visible2} If you need to embed the component or other custom content in the pop -up window, you can use the Module Call method.
lockScroll </Dialog>
footerDirection='vertical' <Cell title="The bottom button is called vertically" onClick={() => setVisible2(true)} />
onOk={() => setVisible2(false)} <Dialog
onCancel={() => setVisible2(false)} title="Module call"
> visible={visible2}
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。 lockScroll
</Dialog> footerDirection='vertical'
</> onOk={() => setVisible2(false)}
onCancel={() => setVisible2(false)}
>
If you need to embed the component or other custom content in the pop -up window, you can use the Module Call method.
</Dialog>
</>
)
}
export default App;
``` ```
:::
## API ## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | parameter | illustrate | type | Defaults |
|--------------|----------------------------------|--------|------------------| |--------------|----------------------------------|--------|------------------|
| visible | 对话框是否可见 | boolean | - | | visible | Whether the dialog box is visible | boolean | - |
| title | 标题 | ReactNode | - | | title | title | ReactNode | - |
| content | 对话框的内容,适用于函数式调用 | ReactNode | - | | content | The content of the dialog box is suitable for function calls | ReactNode | - |
| footer | 自定义页脚,传入 null 则不显示 | ReactNode | - | | footer | Customize the notes, but it will not be displayed in NULL | ReactNode | - |
| okText | 确认按钮文案 | ReactNode | '确定' | | okText | Confirm the button copywriting | ReactNode | 'Sure' |
| cancelText | 取消按钮文案 | ReactNode | '取消' | | cancelText | Cancellation of buttons | ReactNode | 'Cancel' |
| mask | 是否展示遮罩 | boolean | true | | mask | Whether to show a mask | boolean | true |
| noOkBtn | 是否隐藏确定按钮 | boolean | false | | noOkBtn | Whether to hide the OK button | boolean | false |
| noCancelBtn | 是否隐藏取消按钮 | boolean | false | | noCancelBtn | Whether to hide the cancel button | boolean | false |
| okBtnDisabled | 禁用确定按钮 | boolean | false | | okBtnDisabled | Disable the OK button | boolean | false |
| noFooter | 是否隐藏底部按钮栏 | boolean | false | | noFooter | Whether to hide the bottom button bar | boolean | false |
| closeOnClickOverlay | 点击蒙层是否关闭对话框 | boolean | true | | closeOnClickOverlay | Click on whether to close the dialog box | boolean | true |
| cancelAutoClose | 取消按钮是否默认关闭弹窗 | boolean | true | | cancelAutoClose | Cancel the button to close the pop -up window by default | boolean | true |
| textAlign | 文字对齐方向,可选值同 css 的 text-align | string | 'center' | | textAlign | Text alignment direction, optional value is the same as CSS Text-Align | string | 'center' |
| footerDirection | 使用横纵方向 可选值 horizontal、vertical | string | 'horizontal' | | footerDirection |Use horizontal and vertical direction value selection horizontal、vertical | string | 'horizontal' |
| lockScroll | 背景是否锁定 | boolean | false | | lockScroll | Whether the background is locked | boolean | false |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | Incident name | illustrate | Callback parameter |
|--------|----------------|--------------| |--------|----------------|--------------|
| onOk | 确定按钮回调 | (e?: MouseEvent) => Promise | void | | onOk | Determine the button back | (e?: MouseEvent) => Promise | void |
| onCancel | 取消按钮回调 | () => void | | onCancel | Cancel button callback | () => void |
| onClosed | 关闭回调,任何情况关闭弹窗都会触发 | () => void | | onClosed | Turn off the callback, and the pop -up window will be triggered in any case | () => void |
| onClickSelf | Click yourself to call back | () => void |
...@@ -17,64 +17,93 @@ import { Dialog } from '@nutui/nutui-react' ...@@ -17,64 +17,93 @@ import { Dialog } from '@nutui/nutui-react'
### 函数式调用 ### 函数式调用
:::demo
```tsx ```tsx
<Cell title="基础弹框" onClick={() => { import React from "react";
Dialog.alert({ import { Cell,Dialog } from '@nutui/nutui-react';
title: '基础弹框',
content: '支持函数调用和组件调用两种方式。' const App = () => {
}); return (
}}></Cell> <>
<Cell title="无标题弹框" onClick={() => { <Cell title="基础弹框" onClick={() => {
Dialog.alert({
title: '基础弹框',
content: '支持函数调用和组件调用两种方式。'
});
}}>
</Cell>
<Cell title="无标题弹框" onClick={() => {
Dialog.alert({
content: '无标题弹框'
});
}}>
</Cell>
<Cell title="提示弹框" onClick={() => {
Dialog.alert({ Dialog.alert({
content: '无标题弹框' title: '温馨提示',
}); content: '支持函数调用和组件调用两种方式。',
}}></Cell> noCancelBtn: true
<Cell title="提示弹框" onClick={() => { });
Dialog.alert({ }}>
title: '温馨提示', </Cell>
content: '支持函数调用和组件调用两种方式。', <Cell title="底部按钮 垂直调用" onClick={() => {
noCancelBtn: true Dialog.alert({
}); title: '温馨提示',
}}></Cell> content: '支持函数调用和组件调用两种方式。',
<Cell title="底部按钮 垂直调用" onClick={() => { footerDirection: 'vertical'
Dialog.alert({ });
title: '温馨提示', }}>
content: '支持函数调用和组件调用两种方式。', </Cell>
footerDirection: 'vertical' </>
}); )
}}></Cell> }
export default App;
``` ```
:::
### 组件调用 ### 组件调用
:::demo
```tsx ```tsx
const [visible1, setVisible1] = useState(false); import React from "react";
const [visible2, setVisible2] = useState(false); import {useState} from 'react'
import { Cell,Dialog } from '@nutui/nutui-react';
return <>
<Cell title="基础弹框" onClick={() => setVisible1(true)} /> const App = () => {
<Dialog const [visible1, setVisible1] = useState(false);
title="组件调用" const [visible2, setVisible2] = useState(false);
visible={visible1} return (
onOk={() => setVisible1(false)} <>
onCancel={() => setVisible1(false)} <Cell title="基础弹框" onClick={() => setVisible1(true)} />
> <Dialog
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。 title="组件调用"
</Dialog> visible={visible1}
<Cell title="底部按钮 垂直调用" onClick={() => setVisible2(true)} /> onOk={() => setVisible1(false)}
<Dialog onCancel={() => setVisible1(false)}
title="组件调用" >
visible={visible2} 如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
lockScroll </Dialog>
footerDirection='vertical' <Cell title="底部按钮 垂直调用" onClick={() => setVisible2(true)} />
onOk={() => setVisible2(false)} <Dialog
onCancel={() => setVisible2(false)} title="组件调用"
> visible={visible2}
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。 lockScroll
</Dialog> footerDirection='vertical'
</> onOk={() => setVisible2(false)}
onCancel={() => setVisible2(false)}
>
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
</Dialog>
</>
)
}
export default App;
``` ```
:::
## API ## API
......
# Dialog 对话 # Dialog 對話
### 介 ### 介
模态对话框,在浮层中显示,引导用户进行相关操作,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作。 模態對話框,在浮層中顯示,引導用戶進行相關操作,常用於消息提示、消息確認,或在當前頁面內完成特定的交互操作。
彈出框組件支持函數調用和組件調用兩種方式。
弹出框组件支持函数调用和组件调用两种方式。 ### 安裝
### 安装
```js ```js
import { Dialog } from '@nutui/nutui-react' import { Dialog } from '@nutui/nutui-react'
``` ```
## 代码演示 ## 代碼演示
### 函數式調用
### 函数式调用 :::demo
```tsx ```tsx
<Cell title="基础弹框" onClick={() => { import React from "react";
Dialog.alert({ import { Cell,Dialog } from '@nutui/nutui-react';
title: '基础弹框',
content: '支持函数调用和组件调用两种方式。' const App = () => {
}); return (
}}></Cell> <>
<Cell title="无标题弹框" onClick={() => { <Cell title="基礎彈框" onClick={() => {
Dialog.alert({
title: '基礎彈框',
content: '支持函數調用和組件調用兩種方式。'
});
}}>
</Cell>
<Cell title="無標題彈框" onClick={() => {
Dialog.alert({
content: '無標題彈框'
});
}}>
</Cell>
<Cell title="提示彈框" onClick={() => {
Dialog.alert({ Dialog.alert({
content: '无标题弹框' title: '溫馨提示',
}); content: '支持函數調用和組件調用兩種方式。',
}}></Cell> noCancelBtn: true
<Cell title="提示弹框" onClick={() => { });
Dialog.alert({ }}>
title: '温馨提示', </Cell>
content: '支持函数调用和组件调用两种方式。', <Cell title="底部按鈕 垂直調用" onClick={() => {
noCancelBtn: true Dialog.alert({
}); title: '溫馨提示',
}}></Cell> content: '支持函數調用和組件調用兩種方式。',
<Cell title="底部按钮 垂直调用" onClick={() => { footerDirection: 'vertical'
Dialog.alert({ });
title: '温馨提示', }}>
content: '支持函数调用和组件调用两种方式。', </Cell>
footerDirection: 'vertical' </>
}); )
}}></Cell> }
export default App;
``` ```
### 组件调用 :::
### 組件調用
:::demo
```tsx ```tsx
const [visible1, setVisible1] = useState(false); import React from "react";
const [visible2, setVisible2] = useState(false); import {useState} from 'react'
import { Cell,Dialog } from '@nutui/nutui-react';
return <>
<Cell title="基础弹框" onClick={() => setVisible1(true)} /> const App = () => {
<Dialog const [visible1, setVisible1] = useState(false);
title="组件调用" const [visible2, setVisible2] = useState(false);
visible={visible1} return (
onOk={() => setVisible1(false)} <>
onCancel={() => setVisible1(false)} <Cell title="基礎彈框" onClick={() => setVisible1(true)} />
> <Dialog
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。 title="組件調用"
</Dialog> visible={visible1}
<Cell title="底部按钮 垂直调用" onClick={() => setVisible2(true)} /> onOk={() => setVisible1(false)}
<Dialog onCancel={() => setVisible1(false)}
title="组件调用" >
visible={visible2} 如果需要在彈窗內嵌入組件或其他自定義內容,可以使用組件調用的方式。
lockScroll </Dialog>
footerDirection='vertical' <Cell title="底部按鈕 垂直調用" onClick={() => setVisible2(true)} />
onOk={() => setVisible2(false)} <Dialog
onCancel={() => setVisible2(false)} title="組件調用"
> visible={visible2}
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。 lockScroll
</Dialog> footerDirection='vertical'
</> onOk={() => setVisible2(false)}
onCancel={() => setVisible2(false)}
>
如果需要在彈窗內嵌入組件或其他自定義內容,可以使用組件調用的方式。
</Dialog>
</>
)
}
export default App;
``` ```
:::
## API ## API
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 參數 | 說明 | 類型 | 默認值 |
|--------------|----------------------------------|--------|------------------| |--------------|----------------------------------|--------|------------------|
| visible | 对话框是否可见 | boolean | - | | visible |對話框是否可見 | boolean | - |
| title | 标题 | ReactNode | - | | title | 標題 | ReactNode | - |
| content | 对话框的内容,适用于函数式调用 | ReactNode | - | | content | 對話框的內容,適用於函數式調用 | ReactNode | - |
| footer | 自定义页脚,传入 null 则不显示 | ReactNode | - | | footer | 自定義頁腳,傳入 null 則不顯示 | ReactNode | - |
| okText | 确认按钮文案 | ReactNode | '确定' | | okText | 確認按鈕文案 | ReactNode | '確定' |
| cancelText | 取消按文案 | ReactNode | '取消' | | cancelText | 取消按文案 | ReactNode | '取消' |
| mask | 是否展示遮罩 | boolean | true | | mask | 是否展示遮罩 | boolean | true |
| noOkBtn | 是否隐藏确定按钮 | boolean | false | | noOkBtn | 是否隱藏確定按鈕 | boolean | false |
| noCancelBtn | 是否隐藏取消按钮 | boolean | false | | noCancelBtn | 是否隱藏取消按鈕 | boolean | false |
| okBtnDisabled | 禁用确定按钮 | boolean | false | | okBtnDisabled | 禁用確定按鈕 | boolean | false |
| noFooter | 是否隐藏底部按钮栏 | boolean | false | | noFooter | 是否隱藏底部按鈕欄 | boolean | false |
| closeOnClickOverlay | 点击蒙层是否关闭对话框 | boolean | true | | closeOnClickOverlay | 點擊蒙層是否關閉對話框 | boolean | true |
| cancelAutoClose | 取消按钮是否默认关闭弹窗 | boolean | true | | cancelAutoClose | 取消按鈕是否默認關閉彈窗 | boolean | true |
| textAlign | 文字对齐方向,可选值同 css 的 text-align | string | 'center' | | textAlign | 文字對齊方向,可選值同 css 的 text-align | string | 'center' |
| footerDirection | 使用横纵方向 可选值 horizontal、vertical | string | 'horizontal' | | footerDirection | 使用橫縱方向 可選值 horizontal、vertical | string | 'horizontal' |
| lockScroll | 背景是否定 | boolean | false | | lockScroll | 背景是否定 | boolean | false |
### Events ### Events
| 事件名 | 说明 | 回调参数 | | 事件名 | 說明 | 回調參數 |
|--------|----------------|--------------| |--------|----------------|--------------|
| onOk | 确定按钮回调 | (e?: MouseEvent) => Promise | void | | onOk | 確定按鈕回調 | (e?: MouseEvent) => Promise | void |
| onCancel | 取消按钮回调 | () => void | | onCancel | 取消按鈕回調 | () => void |
| onClosed | 关闭回调,任何情况关闭弹窗都会触发 | () => void | | onClosed | 關閉回調,任何情況關閉彈窗都會觸發 | () => void |
| onClickSelf | 點擊自身回調 | () => void |
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册