MDCSnackbarFoundation类的用法 [英] MDCSnackbarFoundation Class usage
问题描述
如何使用MDCSnackbarFoundation?使用MDCSnackbar
How do I use MDCSnackbarFoundation ? with MDCSnackbar
This documentation is not clear enough to get an idea. https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#using-the-foundation-class
这是我的代码,我需要为其绑定MDCSnackbarFoundation.
This is my code and I need to bind MDCSnackbarFoundation for it.
logger =新的MDCSnackbar($ selector [0]);
谢谢
推荐答案
首先,您必须具有 Node.js 服务器.然后,您必须为 Node.js 安装软件包 snackbar
,如下所示:
At first you have to have a Node.js server. And then you have to install a package snackbar
for Node.js like follows:
npm install @material/snackbar
对Snackbar动作的响应
要响应小吃栏操作,请将函数分配给传递给show方法的对象中的可选 actionHandler
属性.如果选择设置此属性,则必须也设置 actionText
属性.
To respond to a snackbar action, assign a function to the optional actionHandler
property in the object that gets passed to the show method. If you choose to set this property, you must also set the actionText
property.
<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之前,我建议您先阅读两本书:
Before you start with Node.js I would recommend to read one from two books:
这篇关于MDCSnackbarFoundation类的用法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!