How to use @material/line-ripple - 10 common examples

this.$set(this.lineClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.lineClasses, className);
      },
      hasClass: className => {
        return Boolean(this.lineClasses[className]);
      },
      setStyle: (name, value) => {
        this.$set(this.lineStyles, name, value);
      },
    };

    // note: do not call the property 'foundation' as the tests will then
    // expext all methods to be implemented, and we handle transitionend locally
    this.foundation_ = new MDCLineRippleFoundation(adapter);
    this.foundation_.init();
  },

this.$set(this.lineClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.lineClasses, className);
      },
      hasClass: className => {
        return Boolean(this.lineClasses[className]);
      },
      setStyle: (name, value) => {
        this.$set(this.lineStyles, name, value);
      },
    };

    // note: do not call the property 'foundation' as the tests will then
    // expext all methods to be implemented, and we handle transitionend locally
    this.foundation_ = new MDCLineRippleFoundation(adapter);
    this.foundation_.init();
  },

mounted () {
    if (!(this.getLineRipple instanceof Function)) { // can not be init by parent
      this.mdcLineRipple = MDCLineRipple.attachTo(this.$el)
      if (this.rippleCenter) this.setRippleCenter(this.rippleCenter)
    }
  },
  beforeDestroy () {

export const lineRipple = directive(() => (part: PropertyPart) => {
  const lastFoundation = partToFoundationMap.get(part);
  if (!lastFoundation) {
    const lineElement = part.committer.element as LineRipple;
    lineElement.classList.add('mdc-line-ripple');
    const adapter = createAdapter(lineElement);
    const foundation = new MDCLineRippleFoundation(adapter);
    foundation.init();
    part.setValue(foundation);
    partToFoundationMap.set(part, foundation);
  }
});

componentDidMount() {
    this.foundation_ = new MDCLineRippleFoundation(this.adapter);
    this.foundation_.init();
    if (this.props.active) {
      this.foundation_.activate();
    }
  }

        if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new MDCLineRipple(el); }; }
        if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }

        if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new MDCLineRipple(el); }; }
        if (helperTextFactory === void 0) { helperTextFactory = function (el) { return new MDCTextFieldHelperText(el); }; }

      lineRippleFactory: MDCLineRippleFactory = (el) => new MDCLineRipple(el),
      outlineFactory: MDCNotchedOutlineFactory = (el) => new MDCNotchedOutline(el),

      lineRippleFactory: MDCLineRippleFactory = (el) => new MDCLineRipple(el),
      helperTextFactory: MDCTextFieldHelperTextFactory = (el) => new MDCTextFieldHelperText(el),

getDefaultFoundation() {
    return new MDCLineRippleFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      hasClass: (className: string) => this.root.hasClass(className),
      setStyle: (propertyName: any, value: any) =>
        this.root.setStyle(propertyName, value),
      registerEventHandler: (
        evtType: K,
        handler: SpecificEventListener
      ) => this.root.addEventListener(evtType, handler),
      deregisterEventHandler: (
        evtType: K,
        handler: SpecificEventListener
      ) => this.root.removeEventListener(evtType, handler)
    });
  }