snackbar

snackbar 函数是对 <mdui-snackbar> 组件的封装。使用该函数,你无需编写组件的 HTML 代码,就能打开一个 snackbar。

使用方法

按需导入函数:

import { snackbar } from 'mdui/functions/snackbar.js';

使用示例:

open
<mdui-button class="example-button">open</mdui-button>

<script type="module">
  import { snackbar } from "mdui/functions/snackbar.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    snackbar({
      message: "Photo archived",
      action: "Undo",
      onActionClick: () => console.log("click action button")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

函数接收一个 Options 对象作为参数;返回值为 <mdui-snackbar> 组件实例。

Options

属性名 类型 默认值
message string -
Snackbar 中的消息文本内容
placement 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' bottom

Snackbar 出现的位置。默认为 bottom。可选值为:

  • top:位于顶部,居中对齐
  • top-start:位于顶部,左对齐
  • top-end:位于顶部,右对齐
  • bottom:位于底部,居中对齐
  • bottom-start:位于底部,左对齐
  • bottom-end:位于底部,右对齐
action string -
操作按钮的文本
closeable boolean false
是否在右侧显示关闭按钮
messageLine 1 | 2 -

消息文本最多显示几行。默认不限制行数。可选值为

  • 1:消息文本最多显示一行
  • 2:消息文本最多显示两行
autoCloseDelay number 5000
在多长时间后自动关闭(单位为毫秒)。设置为 0 时,不自动关闭。默认为 5 秒后自动关闭。
closeOnOutsideClick boolean false
点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
queue string -

队列名称。

默认不启用队列,在多次调用该函数时,将同时显示多个 snackbar。

可在该参数中传入一个队列名称,具有相同队列名称的 snackbar 函数,将在上一个 snackbar 关闭后才打开下一个 snackbar。

onClick (snackbar: Snackbar) => void -

点击 Snackbar 时的回调函数。

函数参数为 snackbar 实例,this 也指向 snackbar 实例。

onActionClick (snackbar: Snackbar) => void | boolean | Promise<void> -

点击操作按钮时的回调函数。

函数参数为 snackbar 实例,this 也指向 snackbar 实例。

默认点击后会关闭 snackbar;若返回值为 false,则不关闭 snackbar;若返回值为 promise,则将在 promise 被 resolve 后,关闭 snackbar。

onOpen (snackbar: Snackbar) => void -

Snackbar 开始显示时的回调函数。

函数参数为 snackbar 实例,this 也指向 snackbar 实例。

onOpened (snackbar: Snackbar) => void -

Snackbar 显示动画完成时的回调函数。

函数参数为 snackbar 实例,this 也指向 snackbar 实例。

onClose (snackbar: Snackbar) => void -

Snackbar 开始隐藏时的回调函数。

函数参数为 snackbar 实例,this 也指向 snackbar 实例。

onClosed (snackbar: Snackbar) => void -

Snackbar 隐藏动画完成时的回调函数。

函数参数为 snackbar 实例,this 也指向 snackbar 实例。

MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库