Dialog 对话框

优质
小牛编辑
121浏览
2023-12-01

对话框组件。

Usage

全部引入

import { Dialog } from 'beeshell';

单独引入

import Dialog from 'beeshell/dist/components/Dialog';

Examples

image

Code

详细 Code

import { Dialog } from 'beeshell';

<Dialog
  ref={(c) => {
    this._dialog = c
  }}
  cancelable={true}
  title='系统提示'
  bodyText='确认删除该信息?'
  cancelCallback={() => {
    console.log('cancel')
  }}
  confirmCallback={() => {
    console.log('confirm')
  }}
/>

this._dialog.open()
this._dialog.close()

API

继承 Modal 组件的所有 Props、Methods。

Props

NameTypeRequiredDefaultDescription
titlestringfalse'标题'标题
titleStyleTextStylefalse{}标题样式
headerReactElementfalsenull自定义头部渲染区域
bodyTextstringfalse'内容'内容文本
bodyTextStyleTextStylefalse{}内容文本样式
bodyReactElementfalsenull自定义内容渲染区域
cancelLabelReactElementfalsenull自定义取消按钮渲染区域
cancelLabelTextstringfalse'取消'取消按钮文本
cancelLabelTextStyleTextStylefalse{}取消按钮文本样式
cancelCallbackFunctionfalsenull取消按钮点击回调
confirmLabelReactElementfalsenull自定义确认按钮渲染区域
confirmLabelTextstringfalse'取消'确认按钮文本
confirmLabelTextStyleTextStylefalse{}确认按钮文本样式
confirmCallbackFunctionfalsenull确认按钮点击回调
operationsLayoutstringfalse'row'操作按钮布局,支持 'row' 'column'
operationsArrayfalsenull自定义操作按钮组,该属性会覆盖前面的 cancel、confirm 按钮相关属性。数组元素为对象 { label: ReactElement, labelText: string, labelTextStyle: TextStyle, type: string, onPress: Function }