Question

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

由于

Answer 1

首先，您必须具有Node.js服务器。然后，您必须为Node.js安装软件包snackbar，如下所示：

npm install @material/snackbar

对Snackbar动作的响应

要响应小吃栏操作，请将函数分配给传递给show方法的对象中的可选actionHandler属性。如果选择设置此属性，则必须也设置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之前，我建议您先阅读两本书：

MDCSnackbarFoundation类用法

1 个答案: