10

如何使用 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]);

谢谢

4

1 回答 1

1

首先,您必须有一个Node.js服务器。然后你必须snackbarNode.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 之前,我建议您阅读两本书中的一本:

于 2018-07-27T11:09:27.057 回答