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

CSS API

详细见 src/style/index.ts