How to use material-components-web - 10 common examples

mounted () {
    // code here executes once the component is rendered
    autoInit(this.$el) // reapply MDCRipple to all mdc-list-item
  },
  methods: {

$(document).ready(function () {

    // Initialize variables
    drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('#main-drawer'));
    refreshIntervalTextfield = new mdc.textField.MDCTextField(document.querySelector('#refresh-interval-tf-div'));

    // Register event listeners
    $('.idcc-toolbar-menu').on('click', function () {
        drawer.open = !drawer.open;
    });

    const activatedClass = 'mdc-list-item--selected';
    $('.mdc-drawer__drawer').on('click', function (event) {
        var target = event.target;
        while (target && !$(target).hasClass('mdc-list-item')) {
            target = target.parentElement;
        }
        if (target) {
            $('.' + activatedClass).removeClass(activatedClass);
            $(event.target).addClass(activatedClass);
            setMainContent(target.id);

mounted () {
    this.menu = new menu.MDCSimpleMenu(this.$el.querySelector('.bottombar-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.toggle-menu').addEventListener('click', (event) => {
      event.stopPropagation()
      event.preventDefault()
      this.scenesMenu.open = false
      this.menu.open = !this.menu.open
    })

    this.scenesMenu = new menu.MDCSimpleMenu(this.$el.querySelector('.scenes-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.toggle-scenes-menu').addEventListener('click', (event) => {
      event.stopPropagation()
      event.preventDefault()
      this.menu.open = false
      this.scenesMenu.open = !this.scenesMenu.open
    })
  },
  methods: {

mounted () {
    this.menu = new menu.MDCSimpleMenu(this.$el.querySelector('.mdc-simple-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.toggle-menu').addEventListener('click', (event) => {
      event.preventDefault()
      this.menu.open = !this.menu.open
    })
  },
  methods: {

mounted () {
    this.menu = new menu.MDCSimpleMenu(this.$el.querySelector('.bottombar-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.toggle-menu').addEventListener('click', (event) => {
      event.stopPropagation()
      event.preventDefault()
      this.scenesMenu.open = false
      this.menu.open = !this.menu.open
    })

    this.scenesMenu = new menu.MDCSimpleMenu(this.$el.querySelector('.scenes-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.toggle-scenes-menu').addEventListener('click', (event) => {
      event.stopPropagation()
      event.preventDefault()
      this.menu.open = false
      this.scenesMenu.open = !this.scenesMenu.open
    })

mounted () {
    this.menu = new menu.MDCSimpleMenu(this.$el.querySelector('.mdc-toolbar__section .mdc-simple-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.mdc-toolbar__section  .toggle-menu').addEventListener('click', (event) => {
      event.preventDefault()
      this.menu.open = !this.menu.open
    })
  },
  watch: {

mounted () {
    this.menu = new menu.MDCSimpleMenu(this.$el.querySelector('.mdc-simple-menu'))
    // Add event listener to some button to toggle the menu on and off.
    this.$el.querySelector('.toggle-menu').addEventListener('click', (event) => {
      event.preventDefault()
      this.menu.open = !this.menu.open
    })
  },
  methods: {

const MDCCheckbox = require('material-components-web').checkbox.MDCCheckbox
  , MDCFormField = require('material-components-web').formField.MDCFormField;

module.exports = {
  template: require('./checkbox.edit.html'),
  bindings: {
    field: '<'
  },
  controller: ['$element', function($element) {
    this.$postLink = function() {
      // $timeout(function() {
        var checkbox = new MDCCheckbox($element.find('.mdc-checkbox')[0])
        var formField = new MDCFormField($element.find('.mdc-form-field')[0])
        formField.input = checkbox;
      // }.bind(this))
    }
  }]

const MDCCheckbox = require('material-components-web').checkbox.MDCCheckbox
  , MDCFormField = require('material-components-web').formField.MDCFormField;

module.exports = {
  template: require('./checkbox.edit.html'),
  bindings: {
    field: '<'
  },
  controller: ['$element', function($element) {
    this.$postLink = function() {
      // $timeout(function() {
        var checkbox = new MDCCheckbox($element.find('.mdc-checkbox')[0])
        var formField = new MDCFormField($element.find('.mdc-form-field')[0])
        formField.input = checkbox;
      // }.bind(this))
    }
  }]
};

$(document).ready(function () {

    // Initialize variables
    drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('#main-drawer'));
    refreshIntervalTextfield = new mdc.textField.MDCTextField(document.querySelector('#refresh-interval-tf-div'));

    // Register event listeners
    $('.idcc-toolbar-menu').on('click', function () {
        drawer.open = !drawer.open;
    });

    const activatedClass = 'mdc-list-item--selected';
    $('.mdc-drawer__drawer').on('click', function (event) {
        var target = event.target;
        while (target && !$(target).hasClass('mdc-list-item')) {
            target = target.parentElement;
        }
        if (target) {
            $('.' + activatedClass).removeClass(activatedClass);
            $(event.target).addClass(activatedClass);