Использование класса MDCSnackbarFoundation

Question

Использование класса MDCSnackbarFoundation

Как мне использовать MDCSnackbarFoundation? с MDCSnackbar

Эта документация недостаточно ясна, чтобы понять. https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar

Это мой код, и мне нужно связать MDCSnackbarFoundation для него.

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

Спасибо

10

javascript material-design mdc-components

Источник

user2096417 04 июн '18 в 11:13

1 ответ

Другие вопросы по тегам javascript material-design mdc-components

user9801830 27 июл '18 в 11:09 2018-07-27 11:09 · Answer 1 · 2018-07-27 11:09

Сначала вы должны иметь сервер Node.js. И тогда вам нужно установить пакет snackbar для Node.js:

npm install @material/snackbar

Реагирование на действие Snackbar

Чтобы отреагировать на действие закусочной, назначьте функцию actionHandler свойство в объекте, которое передается методу show. Если вы решили установить это свойство, вы также должны установить 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, я бы порекомендовал прочитать одну из двух книг: