How to use the @material/ripple/index.MDCRipple.attachTo function in @material/ripple

To help you get started, we’ve selected a few @material/ripple 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 material-components / material-components-web / packages / mdc-tabz / tabz / index.js View on Github external
constructor(root) {
    this.root_ = root;
    this.content_ = this.root_.querySelector(strings.CONTENT_SELECTOR);

    // const rippleRoot_ = this.root_.querySelector(strings.RIPPLE_SURFACE_SELECTOR);
    this.ripple_ = MDCRipple.attachTo(this.root_);

    this.adapter_ = {
      registerEventHandler: (evtType, handler) =>
        this.root_.addEventListener(evtType, handler),
      deregisterEventHandler: (evtType, handler) =>
        this.root_.addEventListener(evtType, handler),
      getRootOffsetLeft: () =>
        this.root_.offsetLeft,
      getRootOffsetWidth: () =>
        this.root_.offsetWidth,
      getContentOffsetLeft: () =>
        this.content_.offsetLeft,
      getContentOffsetWidth: () =>
        this.content_.offsetWidth,
      addClass: (className) =>
        this.root_.classList.add(className),
github material-components / material-components-web-catalog / src / hero / ReactTab.js View on Github external
initRipple = (el) => {
    if (el) {
      const ripple = MDCRipple.attachTo(el);
      ripple.unbounded = true;
      this.ripples.push(ripple);
    }
  };
github material-components / material-components-web-catalog / src / hero / WebTab.js View on Github external
initRipple = (el) => {
    if (el) {
      const ripple = MDCRipple.attachTo(el);
      ripple.unbounded = true;
      this.ripples.push(ripple);
    }
  };
github material-components / material-components-web-catalog / src / IconButtonCatalog.js View on Github external
initRipple = (ele) => {
    if(!ele) return;
    this.ripple = MDCRipple.attachTo(ele);
    this.ripple.unbounded = true;
  };