跳到主要内容

弹窗 Dialog

弹出对话窗，常用于确认、提示等场景。支持 API 式调用和 DOM 式调用。

API

安装使用​

import { $tiDialog } from '@titian-design/mobile-react';

用法示例​

常规 API 式调用​

import { $tiDialog } from '@titian-design/mobile-react'

const App = () => {

    $tiDialog.show({
      title: "Confirm标题",
      content: "内容",
      cancelBtnText: "取消",
      isTextButton: false,
      hasCancelButton: true,
      confirmBtnText: "确定",
      onCancel() {},
      onConfirm() {},
      onClose() {}
    });

    $tiDialog.close()
}

使用 DOM 和插槽​

const App: React.FC = () => {
  const [visible, setVisible]= useState(false);

  const onConfirm = () => {
    console.log('声明式调用 - dialog onConfirm!');
    setVisible(false);
  };

  const onCancel = () => {
    console.log('声明式调用 - dialog onCancel!');
    setVisible(false);
  };

  const onClose = () => {
    console.log('声明式调用 - dialog onClose!');
    setVisible(false);
  };

  const attr = {
     title: "Show标题",
      content: "内容",
      useContentSlot: "",
      cancelBtnText: "取消",
      isTextButton: false,
      hasCancelButton: true,
      confirmBtnText: "确定",
  };

  return (
    <>
      <TiDialog {...attr} visible={visible} onCancel={onCancel} onConfirm={onConfirm} onClose={onClose}>
        <div>
          插槽
        </div>
      </TiDialog>
    </>
  );
}

TiDialog API​

属性 Properties​

名称类型必填默认值说明备注
titlestring否-标题-
contentstring否-内容，支持使用 \n 换行-
zIndexnumber否12000zIndex-
hasCancelButtonboolean否false是否展示取消按钮-
closeOnMaskboolean否true点击遮罩是否关闭对话框-
closeOnActionsboolean否true点击确认和取消按钮，是否关闭对话框-
isTextButtonboolean否false是否为文字按钮-
cancelBtnTextstring否取消取消按钮的文案-
confirmBtnTextstring否确定确定按钮的文案-
confirmButtonColorstring否-确认按钮的颜色-
confirmButtonBgColorstring否-确认按钮的背景颜色-
cancelButtonColorstring否-取消按钮的颜色-
cancelButtonBgColorstring否-取消按钮的背景颜色 -
useContentSlotstring否-使用自定义内容的 slot-
useActionsSlotstring否-使用自定义按钮的 slot-
teleportElement否document.bodyDOM 挂载节点-

事件 Events​

名称参数列表描述备注
onCancel-点击取消按钮时触发-
onConfirm-点击确认按钮时触发-
onClose-当关闭时触发-

插槽 Slots​

名称说明备注
default内容-
actions自定义按钮插槽当 use-actions-slot 为 true 时可用
before-title标题前插槽当 title 为 true 时可用

外部样式类 External Classes​

名称说明备注
extClass根节点样式类-
extPopupClasspopup/ext-class-
extPopupMaskClasspopup/ext-mask-class-
extPopupContentClasspopup/ext-content-class-
extInnerClass内部样式-
extTitleClass标题样式-
extContentClass内容样式-
extActionsClass行为区样式-
extActionsConfirmClass确认样式-
extActionsCancelClass取消样式-

CSS 变量 CSS Variables​

变量默认值说明备注
--dialog-popup-mask-bg-color@popup-mask-bg-color遮罩背景色-
--dialog-popup-radius@popup-radius弹窗圆角-
--dialog-popup-box-bg-color@popup-box-bg-color弹窗背景色-
--dialog-width560px组件宽度-
--dialog-min-height300px组件最小高度-
--dialog-inner-padding-v58px 0 44px 0内容区垂直方向内边距-
--dialog-inner-padding-h48px内容区水平方向内边距-
--dialog-inner-title-colorvar(--neutral-color-1, #212121)内容区标题颜色-
--dialog-inner-content-colorvar(--neutral-color-1, #212121)内容区颜色-
--dialog-actions-height88px按钮区高度-
--dialog-actions-gap32px按钮区按钮间距-
--dialog-actions-border-top-colorvar(--neutral-color-6, #f2f2f2)按钮区上边线颜色-
--dialog-actions-space48px按钮区按钮内边距-
--dialog-actions-cancel-color#757575按钮区取消按钮颜色-
--dialog-actions-cancel-border-color#212121按钮区取消按钮边线颜色-
--dialog-actions-cancel-active-colorrgba(33, 33, 33, 0.1)按钮区取消按钮按压颜色-