@beisen-phoenix/mobile-snackbars NPM

全局反馈

用法

npm install --save @beisen-phoenix/mobile-snackbars

import Snackbars from '@beisen-phoenix/mobile-snackbars';
Snackbars.success('收益已到账：¥ 1,000,000,000,000');

接口

Snackbars在顶部显示一个提示信息条，它有一些方法来显示不同风格的颜色和图标表示不同的情况。调用一次就会创建一个新的实例，新的在Z方向上覆盖旧的。

每一个Snackbar都可以通过拖动手势来关闭。对于自动关闭的Snackbar，在拖动期间自动关闭计时会中止，待拖动手势完成之后如果仍未关闭（非关闭手势），会重新启动计时。

方法如下：

success: 显示成功的颜色及图标
fail: 显示失败的颜色及图标
warning: 显示警告的颜色及图标
info: 显示提示信息的颜色及图标

它们都有如下参数：

name	description	type	default	是否必传
content	显示的内容，可以是字符串，也可以是ReactNode	string \| React.ReactNode		是
duration	持续显示的时间，单位秒（不是毫秒）	number	1.5	否
manuallyClose	是否手动关闭，设为true将会显示一个关闭按钮	boolean	false	否
onClose	关闭回调，在调用`SnackbarInstance.close()`来关闭时不会触发此回调	() => void	否
customClass	自定义类名	string	N/A	否
customZIndex	自定义 z-index	number	N/A	否

它们都返回一个SnackbarInstance：

interface SnackbarInstance {
  close: () => void;
}

其中的close方法可以用来关闭创建的实例。

`show`

另外还有一个show方法，可以用来实现更高级的功能，本质上上述的success、fail等最终都是调用的它。它的参数为SnackbarOptions类型：

interface SnackbarOptions {
  container?: HTMLElement; // Snackbars要添加到的容器，不传则为body
  type?: ShowType;
  content?: string | React.ReactNode;
  duration?: number;
  manuallyClose?: boolean;
  customClass?: string;
  customZIndex?: number;
  onClose?: () => void;
}