javascript - MDCSnackbarFoundation 类用法
问题描述
如何使用 MDCSnackbarFoundation ?使用 MDCSnackbar
该文档不够清晰,无法了解。 https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#using-the-foundation-class
这是我的代码,我需要为它绑定 MDCSnackbarFoundation。
logger = new MDCSnackbar($selector[0]);
谢谢
解决方案
首先,您必须有一个Node.js服务器。然后你必须snackbar
为Node.js安装一个包,如下所示:
npm install @material/snackbar
响应 Snackbar 操作
要响应快餐栏操作,请将函数分配给actionHandler
传递给 show 方法的对象中的可选属性。如果选择设置此属性,则还必须设置该actionText
属性。
<div class="mdc-snackbar"
aria-live="assertive"
aria-atomic="true"
aria-hidden="true">
<div class="mdc-snackbar__text"></div>
<div class="mdc-snackbar__action-wrapper">
<button type="button" class="mdc-snackbar__action-button"></button>
</div>
</div>
import {MDCSnackbar} from '@material/snackbar';
const snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
const dataObj =
{
message: 'The text message to display.',
actionText: 'Take action',
//The function to execute when the action is clicked.
actionHandler: function()
{
console.log('my cool function');
}
};
snackbar.show(dataObj);
了解更多信息:
在开始使用 Node.js 之前,我建议您阅读两本书中的一本:
推荐阅读
- c++ - 如何在网格视图中确定单击的项目
- c# - 统一套接字通信时的错误避免
- python - 在 Python 中通过数组调用时,调度时间被调度模块覆盖
- spring-batch - 如何在 Spring Cloud Data Flow 中为 Spring Batch 作业设置调度程序?
- amazon-web-services - Cloudwatch 自定义事件未触发
- python - JSONDecodeError:额外数据:第 1 行第 884 列(字符 883)
- c - 在 C 中设置一个等于“0x0”的全局变量有什么作用?
- python-3.x - 在读取/显示数据时使用烧瓶/python/sqlalchemy 出现内部 500 错误
- python - QML 仪表未从 Python 更新
- spss - 向数据添加新案例的语法