javascript - MDCSnackbarFoundation 类使用

标签 javascript material-design material-components mdc-components material-components-web

如何使用 MDCSnackbarFoundation ?与 MDCSnackbar

此文档不够清晰,无法理解。 https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#using-the-foundation-class

这是我的代码,我需要为它绑定(bind) MDCSnackbarFoundation。

logger = new MDCSnackbar($selector[0]);

谢谢

最佳答案

首先你必须有一个Node.js服务器。然后你必须为 Node.js 安装一个包 snackbar如下所示:

npm install @material/snackbar

响应 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 之前,我建议您阅读两本书中的一本:

关于javascript - MDCSnackbarFoundation 类使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50679264/

相关文章:

android - 如何在 CoordinatorLayout 滚动时为顶部和底部工具栏(或任何其他 View )设置动画进入/退出屏幕?

android - 使用导航 View 菜单项上的选择器添加自定义形状波纹

javascript - 多个泛型参数类型推断不起作用

javascript - JavaScript 冲突 :Void(0) error

javascript - 如何从 $(.class)[0] 获取 jquery 对象

javascript - 将数据传递给 mdDialog

javascript - 纯javascript,过滤框无法正确过滤

android - TextInputEditText 的 OutlinedBox 不起作用

android - 如何更改 TextInputLayout 中密码切换的颜色?

codenameone - 代号 侧面菜单中的一个 Material 命令出现故障