弹窗 Dialog

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

使用

API

安装使用

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

用法示例

基本使用

展示

codesanbox

copy

code

import React, { useCallback, useRef, useState } from 'react';
import { $tiDialog, TiButton } from 'titian-h5-react';

export default function DialogDefault() {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);

  const show = useCallback(() => {
    setVisible(true);
    console.log('true: ', true);
    $tiDialog.show({
      teleport: ref.current,
      title: 'Confirm标题',
      content: '内容',
      cancelBtnText: '取消',
      isTextButton: false,
      hasCancelButton: true,
      confirmBtnText: '确定',
      onClose() {
        setVisible(false);
      },
    });
  }, []);
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={show}>展示</TiButton>
        </div>
      </div>
    </div>
  );
}

使用 DOM 和插槽

展示

插槽

codesanbox

copy

code

import React, { useRef, useState } from 'react';
import { TiDialog, TiButton } from 'titian-h5-react';

export default function DialogDefault() {
  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 ref = useRef<HTMLDivElement>(null);

  const attr = {
    title: 'Show标题',
    content: '内容',
    useContentSlot: true,
    cancelBtnText: '取消',
    isTextButton: false,
    hasCancelButton: true,
    confirmBtnText: '确定',
  };
  return (
    <div className="code-container">
      <div className="content">
        <div
          ref={ref}
          className={`popup-container ${visible ? 'is-opened' : 'is-closed'}`}
          style={{ transition: visible ? 'unset' : 'height 0.3s 0.3s' }}
        >
          <TiButton onClick={() => setVisible(true)}>展示</TiButton>
          <TiDialog
            {...attr}
            teleport={ref.current}
            visible={visible}
            onCancel={onCancel}
            onConfirm={onConfirm}
            onClose={onClose}
          >
            <div>插槽</div>
          </TiDialog>
        </div>
      </div>
    </div>
  );
}

TiDialog API

属性 Properties

名称	类型	必填	默认值	说明	备注
title	string	否	-	标题	-
content	string	否	-	内容，支持使用 \n 换行	-
zIndex	number	否	12000	zIndex	-
hasCancelButton	boolean	否	false	是否展示取消按钮	-
closeOnMask	boolean	否	true	点击遮罩是否关闭对话框	-
closeOnActions	boolean	否	true	点击确认和取消按钮，是否关闭对话框	-
isTextButton	boolean	否	false	是否为文字按钮	-
cancelBtnText	string	否	取消	取消按钮的文案	-
confirmBtnText	string	否	确定	确定按钮的文案	-
confirmButtonColor	string	否	-	确认按钮的颜色	-
confirmButtonBgColor	string	否	-	确认按钮的背景颜色	-
cancelButtonColor	string	否	-	取消按钮的颜色	-
cancelButtonBgColor	string	否	-	取消按钮的背景颜色 -
useContentSlot	string	否	-	使用自定义内容的 slot	-
useActionsSlot	string	否	-	使用自定义按钮的 slot	-
teleport	Element	否	document.body	DOM 挂载节点	-
preventScroll	boolean	否	true	是否锁定背景滚动；实现上采用 document.body.style.overflow = 'hidden' 方式，内部可以滚动。	-

事件 Events

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

插槽 Slots

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

外部样式类 External Classes

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

CSS 变量 CSS Variables

变量	默认值	说明	默认
--dialog-actions-border-top-color	theme.color.gray.border.50	按钮区域分割线颜色（textbutton模式下）
--dialog-actions-cancel-border-color	theme.color.gray.border.250	取消按钮描边颜色（button模式下）
--dialog-actions-cancel-color	theme.color.gray.texticon.550	取消按钮文字颜色
--dialog-actions-gap	theme.spacing.gap.g4	按钮间距（button模式下）
--dialog-actions-space-bottom	theme.spacing.vertical.v12	按钮区域 - 底部间距
--dialog-actions-space-horizontal	theme.spacing.horizontal.h12	按钮区域 - 左右边距
--dialog-content-color	theme.color.gray.texticon.900	内容文字，颜色
--dialog-content-font-size	theme.fontSize.t7	内容文字，字号
--dialog-content-font-weight	theme.fontWeight.regular	内容文字，字重
--dialog-content-line-height	theme.lineHeight.multiline.t7	内容文字，行高
--dialog-inner-padding-bottom	theme.spacing.vertical.v11	容器内下Padding
--dialog-inner-padding-h	theme.spacing.horizontal.h12	容器内左右Padding（不包括确认按钮）
--dialog-inner-padding-top	theme.spacing.vertical.v14	容器内上Padding
--dialog-popup-box-bg-color	theme.color.gray.background.default	弹窗容器背景色
--dialog-popup-mask-bg-color	theme.color.gray.mask.800	遮罩背景颜色
--dialog-popup-radius	theme.borderRadius.r4	弹窗圆角
--dialog-title-color	theme.color.gray.texticon.900	标题颜色
--dialog-title-font-size	theme.fontSize.t9	标题字号
--dialog-title-font-weight	theme.fontWeight.semibold	标题字重
--dialog-title-line-height	theme.lineHeight.multiline.t8	标题行高
--dialog-title-margin-bottom	theme.spacing.gap.g5	标题与内容文字间距gap
--dialog-width	560px	组件宽度	-
--dialog-min-height	300px	组件最小高度	-
--dialog-actions-height	88px	按钮区高度	-