@rax-ui/dialog NPM

display: Dialog

family: other

Dialog

对话框

API

Dialog

参数	说明	类型	默认值
visible	是否显示	bool	false
type	对话框类型	'none' / 'alert' / 'confirm'	false
keepMounted	是否一直存在	boolean	false
hideBackdrop	是否隐藏遮盖背景	boolean	false
disableBackdropClose	是否禁用背景点击关闭	boolean	false
title	对话框的标题内容	node
icon	对话框的图标, 支持传入图标名称或者图片 URL 路径	string
iconColor	图标的颜色类型可选值： `success`, `notice`, `warning`, `error`, `normal`	enum	`normal`
message	对话框的文字内容	string
close	是否显示关闭按钮	bool	false
free	是否是自由模式，设置为 `true` 只有关闭按钮的位置和样式将会发生变化	bool	false
buttons	对话框底部按钮	DialogButtonProps[]	[]
buttonDirection	按钮排列方向可选值： `row`, `column`	enum	`row`
renderBanner	渲染对话框 banner 部分的内容	():node
onOk	确定按钮被点击时回调	(e) => void;
onCancel	取消按钮被点击时回调	(e) => void;
onButtonClick	按钮被点击时回调	(index?: number, e?: any) => void;
onHide	当对话框遮盖层点击或者点击关闭按钮时回调	(reason: string, e) => void
onEnter	开始进入时回调函数	() => void
onExit	开始退出时回调函数	() => void
onEntering	正在进入时回调函数	() => void
onExiting	正在退出时回调函数	() => void
onEntered	进入后回调函数	() => void
onExited	退出后回调函数	() => void
onBackdropClick	遮盖背景被点击时调用	() => void
onClose	关闭时调用	(reason: string) => void
children	对话框的内容	node

DialogButtonProps

参数	说明	类型
text	按钮文字	string
onClick	点击之后回调【小程序支持旧版本存在风险】	(e) => void
style	按钮样式	CSSProperties
textStyle	按钮文字样式	CSSProperties

函数式调用（WEB, Weex）

import Dialog from '@rax-ui/dialog';

// 提示
Dialog.alert({
  message: 'Hello alert',
  button: '自定义按钮' // 默认确定
}, () => {
  console.log('callback')
});

// 确认
Dialog.confirm({
  title: 'title',
  message: 'Hello alert',
  okButton: '自定义确定', // 默认确定
  cancelButton: '自定义取消', // 默认取消
}, (e) => {
  console.log(e.ok); // 是否点击确定
});

// 自定义内容和按钮
const hide = Dialog.show({
  title: 'title',
  content: (
    <View>
      <Text>自定义内容</Text>
    </View>
  ),
  buttons: [
    '知道了',
    {
      a: 1,
      b: 2,
      text: '关闭',
      style: { // 自定义按钮样式
        backgroundColor: 'red'
      },
      textStyle: { // 自定义按钮文案样式
        color: 'white'
      }
    }
  ]
}, (e) => {
  console.log(e); // 包含 button 里的属性如 e.a, e.b
  hide(); // 需要手动关闭
});

组件式调用

import { useState } from 'rax';
import Dialog from '@rax-ui/dialog';

function App() {
  const [visible, setVisible] = useState(true);
  return (
    <Dialog
      title="标题"
      visible={visible}
      buttons={[{ text: '确定', onClick: () => setVisible(false)}]}
    >
      <View>自定义内容</View>
    </Dialog>
  )
}