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 实例。

prompt

getTheme