MDCSnackbarFoundation类的用法 [英] MDCSnackbarFoundation Class usage

本文介绍了MDCSnackbarFoundation类的用法的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用MDCSnackbarFoundation?使用MDCSnackbar

How do I use MDCSnackbarFoundation ? with MDCSnackbar

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

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆