iBest-UI@HarmonyOS

Appearance

Dialog 弹出框 ​

介绍 ​

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。支持组件调用。

引入 ​

ts
import { IBestDialog } from "@ibestservices/ibest-ui";

代码演示 ​

TIP

  • 本组件基于自定义弹窗进行的封装，受鸿蒙限制，暂未找到函数调用的解决方案

提示弹窗 ​

提示弹窗

TIP

用于提示一些消息，默认只包含一个确认按钮。

点我查看代码
ts
import { IBestDialog, IBestButton } from '@ibestservices/ibest-ui'

@Entry
@Component
struct DialogPage {
  basicDialogController: CustomDialogController = null;

  build(){
    Column(){
      // 引入dialog组件
      IBestDialog({
        title: '提示',
        message: '代码是写出来给人看的，附带能在机器上运行。',
        onReady: controller => {
          this.basicDialogController = controller;
        },
      })

      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          this.basicDialogController.open();
        }
      })
    }
  }
}

提示弹窗（无标题） ​

提示弹窗（无标题）

TIP

用于提示一些消息，默认只包含一个确认按钮。

点我查看代码
ts
import { IBestDialog, IBestButton } from '@ibestservices/ibest-ui'

@Entry
@Component
struct DialogPage {
  basicDialogController: CustomDialogController = null;

  build(){
    Column(){
      // 引入dialog组件
      IBestDialog({
        title: '',
        message: '代码是写出来给人看的，附带能在机器上运行。',
        onReady: controller => {
          this.basicDialogController = controller;
        },
      })

      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          this.basicDialogController.open();
        }
      })
    }
  }
}

确认弹窗 ​

确认弹窗

TIP

用于确认消息，默认包含确认和取消按钮。

点我查看代码
ts
import { IBestDialog, IBestButton } from '@ibestservices/ibest-ui'

@Entry
@Component
struct DialogPage {
  basicDialogController: CustomDialogController = null;

  build(){
    Column(){
      // 引入dialog组件
      IBestDialog({
        title: '提示',
        message: '代码是写出来给人看的，附带能在机器上运行。',
        // 显示取消按钮
        showCancelButton: true,
        onReady: controller => {
          this.basicDialogController = controller;
        },
      })

      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          this.basicDialogController.open();
        }
      })
    }
  }
}

异步关闭 ​

异步关闭

TIP

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

点我查看代码
ts
import { IBestDialog, IBestButton } from '@ibestservices/ibest-ui'

@Entry
@Component
struct DialogPage {
  basicDialogController: CustomDialogController = null;

  build(){
    Column(){
      // 引入dialog组件
      IBestDialog({
        title: '提示',
        message: '代码是写出来给人看的，附带能在机器上运行。',
        // 显示取消按钮
        showCancelButton: true,
        onReady: controller => {
          this.basicDialogController = controller;
        },
        beforeClose: (action) => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(action === 'confirm')
            }, 1000)
          })
        }
      })

      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          this.basicDialogController.open();
        }
      })
    }
  }
}

使用插槽 ​

使用插槽

TIP

通过 defaultBuilder 插槽可以自定义弹窗内容。

点我查看代码
ts
import { IBestDialog, IBestButton } from '@ibestservices/ibest-ui'

@Entry
@Component
struct DialogPage {
  /**
   * 输入框的值
   */
  @State inputValue: string = '';
  /**
   * 输入框的错误状态
   */
  @State formInputError: boolean = false;
  /**
   * 弹窗控制器
   */
  basicDialogController: CustomDialogController = null;

  /**
   * form输入框
   */
  @Builder
  FormInputContain() {
    Column() {
      TextInput({ 'placeholder': '请输入' })
        .fontSize('28lpx')
        .placeholderFont({ size: '28lpx' })
        .onChange((value) => {
          this.inputValue = value;
          this.formInputError = false
        })
      if (this.formInputError) {
        Text('不能为空')
          .width('100%')
          .textAlign(TextAlign.Start)
          .margin({
            top: SPACE.BASE,
            left: SPACE.MINI
          })
          .fontColor(Color.Red)
          .fontSize('24lpx')
          .transition({ type: TransitionType.Insert, opacity: 1 })
          .transition({ type: TransitionType.Delete, opacity: 0 })
      }

    }.width('90%').margin({ top: '30lpx', bottom: '30lpx' })
  }


  build(){
    Column(){
      // 引入dialog组件
      IBestDialog({
        title: '提示',
        // defaultbuidler插槽传入后需要自己编写弹窗体的内外边距
        defaultBuilder: this.FormInputContain.bind(this),
        // 显示取消按钮
        showCancelButton: true,
        onReady: controller => {
          this.basicDialogController = controller;
        },
        beforeClose: (action) => {
          if (action === 'cancel') {
            return true
          }
          const valueLength = this.inputValue.trim().length;
          this.formInputError = !valueLength;
          return !this.formInputError
        },
      })

      IBestButton({
        text: '打开弹窗',
        type: 'primary',
        onClickBtn: () => {
          this.basicDialogController.open();
        }
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
dialogWidth弹窗的宽度string640lpx
dialogBorderRadius弹窗的圆角string32lpx
title弹窗的标题string
titleColor弹窗的标题文字颜色string
#323233
titlePaddingTop弹窗的标题的 padding-top 值string52lpx
titlePaddingX标题的 padding-left 与 padding-right 值string48lpx
titleLienHeight标题的 line-height 值string48lpx
titleFontSize标题的 font-size 值string32lpx
titleTextAlign标题的对齐方式left | center | rightcenter
message弹窗的内容区域文本string
messagePaddingTop弹窗的内容区域的 padding-top 值string16lpx
messagePaddingX弹窗的内容区域的 padding-left 与 padding-right 值string48lpx
messagePaddingXBottom弹窗的内容区域的 padding-bottom 值string52lpx
messageFontColor弹窗的内容区域的 padding-bottom 值string52lpx
messageFontSize弹窗的内容区域的 font-size 值string28lpx
messageLineHeight弹窗的内容区域的 line-height 值string40lpx
messageTextAlign弹窗的内容区域的文字对齐方式left | center | rightcenter
messageMaxHeight弹窗的内容区域的滚动区域最大高度string60%
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮文案string确认
cancelButtonText取消按钮的文案string取消
confirmButtonColor确认按钮的颜色string
#3D8AF2
cancelButtonColor取消按钮的颜色string
#646566
confirmButtonDisabled是否禁用确认按钮booleanfalse
cancelButtonDisabled是否禁用取消按钮booleanfalse
showOverlay是否展示遮罩层，不展示的话则没有遮罩层 API 10+booleantrue
overlayColor遮罩层颜色 API 10+string
0x33000000
showInSubWindow某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗 API 10+booleanfalse

Events ​

事件名说明事件类型
onReady弹窗初始化的回调(dialogController: CustomDialogController) => void
onConfirm点击确认按钮的回调(event?: ClickEvent) => void
onCancel点击取消按钮的回调(event?: ClickEvent) => void
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(event?: ClickEvent) => void

@BuilderParam 插槽 ​

插槽名说明类型
titleBuilder标题的插槽，优先级大于 title 属性，将会完全接管 title 的渲染和间距控制CustomBuilder | null
defaultBuilder内容的插槽，优先级大于 message 属性，将会完全接管 message 的渲染和间距控制CustomBuilder | null
footerBuilder底部的插槽，将会完全接管按钮不为的渲染和间距控制CustomBuilder | null