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
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:
