Snackbar 消息条

消息条组件用于在页面中展示简短的应用程序进程信息。

除了直接使用该组件外,mdui 还提供了一个 mdui.snackbar 函数,以简化 Snackbar 组件的使用。

使用方法

按需导入组件:

import 'mdui/components/snackbar.js';

按需导入组件的 TypeScript 类型:

import type { Snackbar } from 'mdui/components/snackbar.js';

使用示例:

Photo archived 打开 Snackbar
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>

<mdui-button>打开 Snackbar</mdui-button>

<script>
  const snackbar = document.querySelector(".example-snackbar");
  const openButton = snackbar.nextElementSibling;

  openButton.addEventListener("click", () => snackbar.open = true);
</script>

示例

位置

通过 placement 属性,你可以设置 Snackbar 的显示位置。

操作按钮

可以使用 action 属性在 Snackbar 的右侧添加一个操作按钮,并通过该属性指定按钮的文本。点击操作按钮会触发 action-click 事件。如果你想让操作按钮显示为加载中状态,可以添加 action-loading 属性。

也可以通过 action slot 在 Snackbar 的右侧添加自定义元素。

可关闭

添加 closeable 属性后,Snackbar 的右侧会出现一个关闭按钮。点击该按钮会关闭 Snackbar,并触发 close 事件。

可以通过 close-button slot 来自定义关闭按钮的元素。

通过设置 close-icon 属性,你可以修改默认关闭按钮中的 Material Icons 图标。也可以通过 close-icon slot 来自定义关闭按钮中的图标元素。

文本行数

默认情况下,消息文本没有行数限制。你可以通过 message-line 属性来限制文本行数,最多可以设置为 2 行。

自动关闭延时

可以使用 auto-close-delay 属性来设置自动关闭的延时,单位为毫秒。默认值为 5000 毫秒。

点击外部区域关闭

通过添加 close-on-outside-click 属性,你可以设置在点击 Snackbar 外部区域时关闭 Snackbar。

API

属性

HTML 属性JavaScript 属性Reflect类型默认值
openopenbooleanfalse

是否显示 Snackbar

placementplacement'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end''bottom'

Snackbar 的显示位置。默认为 bottom。可选值包括:

  • top:顶部居中
  • top-start:顶部左对齐
  • top-end:顶部右对齐
  • bottom:底部居中
  • bottom-start:底部左对齐
  • bottom-end:底部右对齐
actionactionstring-

操作按钮的文本。也可以通过 slot="action" 设置操作按钮

action-loadingactionLoadingbooleanfalse

操作按钮是否处于加载中状态

closeablecloseablebooleanfalse

是否在右侧显示关闭按钮

close-iconcloseIconstring-

关闭按钮的 Material Icons 图标名。也可以通过 slot="close-icon" 设置

message-linemessageLine1 | 2-

消息文本的最大显示行数。默认不限制。可选值包括:

  • 1:最多显示一行
  • 2:最多显示两行
auto-close-delayautoCloseDelaynumber5000

自动关闭的延迟时间(单位:毫秒)。设置为 0 则不自动关闭。默认为 5000 毫秒

close-on-outside-clickcloseOnOutsideClickbooleanfalse

点击或触摸 Snackbar 以外的区域时,是否关闭 Snackbar

事件

名称
open

Snackbar 开始显示时,事件被触发。可以通过调用 event.preventDefault() 阻止 Snackbar 显示

opened

Snackbar 显示动画完成时,事件被触发

close

Snackbar 开始隐藏时,事件被触发。可以通过调用 event.preventDefault() 阻止 Snackbar 关闭

closed

Snackbar 隐藏动画完成时,事件被触发

action-click

点击操作按钮时触发

Slots

名称
默认

Snackbar 的消息文本内容

action

右侧的操作按钮

close-button

右侧的关闭按钮。必须设置 closeable 属性为 true 才会显示

close-icon

关闭按钮中的图标

CSS Parts

名称
message

消息文本

action

操作按钮

close-button

关闭按钮

close-icon

关闭按钮中的图标

CSS 自定义属性

名称
--shape-corner

组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌

--z-index

组件的 CSS z-index

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 图标组件库