Search code examples
javascriptmaterial-designmaterial-componentsmdc-componentsmaterial-components-web

MDCSnackbarFoundation Class usage

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

This is my code and I need to bind MDCSnackbarFoundation for it.

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

Thanks

Solution

  • 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

    Responding to a Snackbar Action

    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);

    For further information:

    Before you start with Node.js I would recommend to read one from two books: