How to use the @material/icon-button/foundation function in @material/icon-button

To help you get started, we’ve selected a few @material/icon-button examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pgbross / vue-material-adapter / packages / mcwv-icon-button / mdc-icon-button.js View on Github external
mounted() {
    const { CHANGE_EVENT } = MDCIconButtonToggleFoundation.strings;
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => Boolean(this.classes[className]),
      setAttr: (attrName, attrValue) =>
        this.$el.setAttribute(attrName, attrValue),
      notifyChange: evtData => {
        this.$emit(CHANGE_EVENT, evtData);
        this.$emit('change', evtData.isOn);
      },
    };

    this.foundation = new MDCIconButtonToggleFoundation(adapter);
    this.foundation.init();

    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,
    });
    this.ripple.init();
    this.foundation.toggle(this.isOn);
  },
github pgbross / vue-material-adapter / packages / mcwv-icon-button / icon-button.js View on Github external
mounted() {
    const { CHANGE_EVENT } = MDCIconButtonToggleFoundation.strings;
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => Boolean(this.classes[className]),
      setAttr: (attrName, attrValue) =>
        this.$el.setAttribute(attrName, attrValue),
      notifyChange: evtData => {
        this.$emit(CHANGE_EVENT, evtData);
        this.$emit('change', evtData.isOn);
      },
    };

    this.foundation = new MDCIconButtonToggleFoundation(adapter);
    this.foundation.init();

    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,
    });
    this.ripple.init();
    this.foundation.toggle(this.isOn);
  },