轻提示 Toast

用于交互提示、加载结果等场景。

使用

API

安装使用

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

用法示例

基本使用

轻提示警告提示成功提示失败提示加载提示

codesanbox

copy

code

import React from 'react';
import { TiButton, $tiToast } from 'titian-h5-react';

export default function App() {
  return (
    <div className="code-container" style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      <TiButton onClick={() => $tiToast.info('这是一条轻提示！')}>轻提示</TiButton>
      <TiButton onClick={() => $tiToast.warn('这是一条警告提示！')}>警告提示</TiButton>
      <TiButton onClick={() => $tiToast.success('这是一条成功提示！')}>成功提示</TiButton>
      <TiButton onClick={() => $tiToast.fail('这是一条失败提示！')}>失败提示</TiButton>
      <TiButton onClick={() => $tiToast.loading('这是一条加载提示！')}>加载提示</TiButton>
    </div>
  );
}

TiToast API

方法 Methods

方法名	说明	参数	返回值
$tiToast.success	展示成功提示	ToastOptions | string
$tiToast.warn	展示警告提示	ToastOptions | string
$tiToast.fail	展示失败提示	ToastOptions | string
$tiToast.loading	展示加载提示	ToastOptions | string
$tiToast.info	展示文本	ToastOptions | string
$tiToast.clear	清除提示	-

ToastOptions 数据结构

名称	类型	必填	默认值	说明	备注
text	number	否	100	文本
z-index	number	否	30000	z-index 层级
duration	number	否	2000	展示时长	-
color	string	否	#fff	颜色	-
icon	string	否	-	轻提示 icon	-
finished-callback	Function	否	0	回调	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明
--toast-popup-mask-bg-color	同 Popup 组件 --popup-mask-bg-color	-
--toast-popup-radius	theme.borderRadius.r2	-
--toast-popup-box-bg-color	同 Popup 组件 --popup-box-bg-color	-
--toast-bg-color	theme.color.gray.mask.800	容器背景色
--toast-content-padding	theme.spacing.vertical.v4 theme.spacing.horizontal.h6	icon模式下内容区域内边距
	theme.spacing.vertical.v5 theme.spacing.horizontal.h9	纯文字模式下内容区域内边距
--toast-text-line-height	theme.lineHeight.multiline.t3	icon 模式下文字行高
	theme.lineHeight.multiline.t6	纯文字模式下文字行度
--toast-status-gap	theme.spacing.gap.g3	文字与Icon间距
--toast-text-color	theme.color.gray.texticon.invert	-
--toast-text-font-size	theme.fontSize.t4	icon模式文本区字号
	theme.fontSize.t6	纯文字模文本区字号
--toast-text-font-weight	theme.fontWeight.regular	纯文字模文本区字重
--toast-icon-size	theme.fontSize.t16	图文模式下，icon 尺寸