How to use @material/top-app-bar - 10 common examples

//         if (this.myScrollTarget) {
      //           this.myScrollTarget.removeEventListener('scroll', handler);
      //         } else {
      //           window.removeEventListener('scroll', handler);
      //         }
      //       },
      getViewportScrollY: () => window.pageYOffset,
      getTotalActionItems: () =>
        this.$refs.root.querySelectorAll(`.${cssClasses.ACTION_ITEM}`).length,
    };

    const { short, shortCollapsed, fixed } = this;
    if (short || shortCollapsed) {
      this.foundation_ = new MDCShortTopAppBarFoundation(adapter);
    } else if (fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(adapter);
    }

    this.navIcon_ = this.$el.querySelector(NAVIGATION_ICON_SELECTOR);

    if (this.navIcon_) {
      this.navIcon_.addEventListener('click', this.handleNavigationClick_);
    }

    this.myScrollTarget = this.scrollTarget || window;
    this.foundation_.init();
  },
  beforeDestroy() {

//       },
      //       deregisterScrollHandler: handler => {
      //         if (this.myScrollTarget) {
      //           this.myScrollTarget.removeEventListener('scroll', handler);
      //         } else {
      //           window.removeEventListener('scroll', handler);
      //         }
      //       },
      getViewportScrollY: () => window.pageYOffset,
      getTotalActionItems: () =>
        this.$refs.root.querySelectorAll(`.${cssClasses.ACTION_ITEM}`).length,
    };

    const { short, shortCollapsed, fixed } = this;
    if (short || shortCollapsed) {
      this.foundation_ = new MDCShortTopAppBarFoundation(adapter);
    } else if (fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(adapter);
    }

    this.navIcon_ = this.$el.querySelector(NAVIGATION_ICON_SELECTOR);

    if (this.navIcon_) {
      this.navIcon_.addEventListener('click', this.handleNavigationClick_);
    }

    this.myScrollTarget = this.scrollTarget || window;
    this.foundation_.init();
  },
  beforeDestroy() {

//         } else {
      //           window.removeEventListener('scroll', handler);
      //         }
      //       },
      getViewportScrollY: () => window.pageYOffset,
      getTotalActionItems: () =>
        this.$refs.root.querySelectorAll(`.${cssClasses.ACTION_ITEM}`).length,
    };

    const { short, shortCollapsed, fixed } = this;
    if (short || shortCollapsed) {
      this.foundation_ = new MDCShortTopAppBarFoundation(adapter);
    } else if (fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(adapter);
    }

    this.navIcon_ = this.$el.querySelector(NAVIGATION_ICON_SELECTOR);

    if (this.navIcon_) {
      this.navIcon_.addEventListener('click', this.handleNavigationClick_);
    }

    this.myScrollTarget = this.scrollTarget || window;
    this.foundation_.init();
  },
  beforeDestroy() {

updated() {
    this.topAppBar.destroy()
    this.topAppBar = new MDCTopAppBar(this.shadowRoot.querySelector('.mdc-top-app-bar'))

    // Get the target scrollbar of 'm-top-app-bar' and trigger the animation based on this scrollbar (JSX use) (获取 'm-top-app-bar' 的目标滚动条，根据此滚动条触发动画)
    if(this.props.scrollTarget) {  //(JSX 使用)
      this.topAppBar.setScrollTarget(this.props.scrollTarget)
    } else { // (原生 js 使用)
      if(this.props.scrollTargetId) {
        const findTarge = document.querySelector('#' + this.props.scrollTargetId)
        findTarge ? this.topAppBar.setScrollTarget(findTarge) : this.topAppBar.setScrollTarget(window)
      } else {
        this.topAppBar.setScrollTarget(window)
      }
    }
  }

notifyNavigationIconClicked: () => this.navigationSelected.emit({ source: this }),
      getViewportScrollY: () => {
        if (!this._platform.isBrowser) { return 0; }

        return this._scrollTarget[this._scrollTarget === window ? 'pageYOffset' : 'scrollTop'];
      },
      getTotalActionItems: () => this.actions ? this.actions.length : 0
    };

    let foundation: MDCTopAppBarBaseFoundation;
    if (!this.elementRef) {
      return new MDCTopAppBarBaseFoundation(adapter);
    }

    if (this.short) {
      foundation = new MDCShortTopAppBarFoundation(adapter);
    } else if (this.fixed) {
      foundation = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      foundation = new MDCTopAppBarFoundation(adapter);
    }
    return foundation;
  }

const modelLoadingNotice = document.querySelector("#model-loading");
  const progressBar = document.querySelector("#progressBar");
  const rippleSurface = document.querySelectorAll(".ripple-surface");

  for (let i = 0; i < 9; i++) {
    predictedWordsButtons.push(document.querySelector(`#word${i + 1}`));
  }

  modelLoadingNotice.style.display = "block";
  btnsDiv.style.display = "none";
  inputTextField.style.display = "none";

  rippleSurface.forEach(i => MDCRipple.attachTo(i));

  let mdcTextField = new MDCTextField(inputTextField);
  MDCTopAppBar.attachTo(document.querySelector("#app-bar"));
  let drawer = new MDCTemporaryDrawer(document.querySelector("#drawer"));

  document.querySelector("#menu").addEventListener("click", () => {
    drawer.open = true;
  });

  const model = await loadModel("/web_model/model.json");

  /**
   * Predict next word
   * @param {string} string Input String.
   * @param {number} numPrediction Total number of prediction to get.
   */
  window.predictNextWord = async (string, numPrediction) => {
    isQuestion = false;
    string = string.toLowerCase().split(" ");

this._getHostElement().classList.remove(className);
      },
      setStyle: (property: string, value: string) => this._getHostElement().style.setProperty(property, value),
      getTopAppBarHeight: () => this._getHostElement().clientHeight,
      notifyNavigationIconClicked: () => this.navigationSelected.emit({ source: this }),
      getViewportScrollY: () => {
        if (!this._platform.isBrowser) { return 0; }

        return this._scrollTarget[this._scrollTarget === window ? 'pageYOffset' : 'scrollTop'];
      },
      getTotalActionItems: () => this.actions ? this.actions.length : 0
    };

    let foundation: MDCTopAppBarBaseFoundation;
    if (!this.elementRef) {
      return new MDCTopAppBarBaseFoundation(adapter);
    }

    if (this.short) {
      foundation = new MDCShortTopAppBarFoundation(adapter);
    } else if (this.fixed) {
      foundation = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      foundation = new MDCTopAppBarFoundation(adapter);
    }
    return foundation;
  }

this.myScrollTarget.removeEventListener('scroll', handler);
        } else {
          window.removeEventListener('scroll', handler);
        }
      },

      getViewportScrollY: () => window.pageYOffset,
      getTotalActionItems: () =>
        this.$refs.root.querySelectorAll(`.${cssClasses.ACTION_ITEM}`).length,
    };

    const { short, shortCollapsed, fixed } = this;
    if (short || shortCollapsed) {
      this.foundation_ = new MDCShortTopAppBarFoundation(adapter);
    } else if (fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(adapter);
    }

    this.foundation_.init();
  },
  beforeDestroy() {

deregisterScrollHandler: handler => {
        if (this.myScrollTarget) {
          this.myScrollTarget.removeEventListener('scroll', handler);
        } else {
          window.removeEventListener('scroll', handler);
        }
      },

      getViewportScrollY: () => window.pageYOffset,
      getTotalActionItems: () =>
        this.$refs.root.querySelectorAll(`.${cssClasses.ACTION_ITEM}`).length,
    };

    const { short, shortCollapsed, fixed } = this;
    if (short || shortCollapsed) {
      this.foundation_ = new MDCShortTopAppBarFoundation(adapter);
    } else if (fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(adapter);
    }

    this.foundation_.init();
  },
  beforeDestroy() {

window.removeEventListener('scroll', handler);
        }
      },

      getViewportScrollY: () => window.pageYOffset,
      getTotalActionItems: () =>
        this.$refs.root.querySelectorAll(`.${cssClasses.ACTION_ITEM}`).length,
    };

    const { short, shortCollapsed, fixed } = this;
    if (short || shortCollapsed) {
      this.foundation_ = new MDCShortTopAppBarFoundation(adapter);
    } else if (fixed) {
      this.foundation_ = new MDCFixedTopAppBarFoundation(adapter);
    } else {
      this.foundation_ = new MDCTopAppBarFoundation(adapter);
    }

    this.foundation_.init();
  },
  beforeDestroy() {