跳到主要内容

弹窗 Dialog

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

安装使用

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 换行-
zIndexnumber12000zIndex-
hasCancelButtonbooleanfalse是否展示取消按钮-
closeOnMaskbooleantrue点击遮罩是否关闭对话框-
closeOnActionsbooleantrue点击确认取消按钮,是否关闭对话框-
isTextButtonbooleanfalse是否为文字按钮-
cancelBtnTextstring取消取消按钮的文案-
confirmBtnTextstring确定确定按钮的文案-
confirmButtonColorstring-确认按钮的颜色-
confirmButtonBgColorstring-确认按钮的背景颜色-
cancelButtonColorstring-取消按钮的颜色-
cancelButtonBgColorstring-取消按钮的背景颜色 -
useContentSlotstring-使用自定义内容的 slot-
useActionsSlotstring-使用自定义按钮的 slot-
teleportElementdocument.bodyDOM 挂载节点-

事件 Events

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

插槽 Slots

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

外部样式类 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)按钮区取消按钮按压颜色-