How to use @material/tab-scroller - 10 common examples

componentDidMount() {
    this.foundation = new MDCTabScrollerFoundation(this.adapter);
    this.foundation.init();
  }

computeHorizontalScrollbarHeight: () =>
          scrollerUtil.computeHorizontalScrollbarHeight(document)
      });

computeHorizontalScrollbarHeight: () =>
        this._platform.isBrowser ? util.computeHorizontalScrollbarHeight(document) : 0
    };

computeHorizontalScrollbarHeight: () =>
        scrollerUtil.computeHorizontalScrollbarHeight(document)
    });

getDefaultFoundation() {
    return new MDCTabScrollerFoundation({
      eventTargetMatchesSelector: (evtTarget: EventTarget, selector: string) =>
        matches(evtTarget as HTMLElement, selector),
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      addScrollAreaClass: (className: string) => this.area.addClass(className),
      setScrollAreaStyleProperty: (prop: string, value: string) =>
        this.area.setStyle(prop, value),
      setScrollContentStyleProperty: (prop: string, value: string) =>
        this.content.setStyle(prop, value),
      getScrollContentStyleValue: (propName: string) => {
        const val =
          this.content.ref &&
          window.getComputedStyle(this.content.ref).getPropertyValue(propName);

        return val || 'none';
      },

setScrollContentStyleProperty: (propName: string, value: string) =>
        this.content.nativeElement.style.setProperty(propName, value),
      getScrollContentStyleValue: (propName: string) =>
        this._platform.isBrowser ? window.getComputedStyle(this.content.nativeElement).getPropertyValue(propName) : '',
      setScrollAreaScrollLeft: (scrollX: number) => this.area.nativeElement.scrollLeft = scrollX,
      getScrollAreaScrollLeft: () => this.area.nativeElement.scrollLeft,
      getScrollContentOffsetWidth: () => this.content.nativeElement.offsetWidth,
      getScrollAreaOffsetWidth: () => this.area.nativeElement.offsetWidth,
      computeScrollAreaClientRect: () =>
        this._platform.isBrowser ? this.area.nativeElement.getBoundingClientRect() : {},
      computeScrollContentClientRect: () =>
        this._platform.isBrowser ? this.content.nativeElement.getBoundingClientRect() : {},
      computeHorizontalScrollbarHeight: () =>
        this._platform.isBrowser ? util.computeHorizontalScrollbarHeight(document) : 0
    };
    return new MDCTabScrollerFoundation(adapter);
  }

mounted () {
    if (this.getTabScroller instanceof Function) {
      this.$nextTick(() => {
        this.mdcTabScroller = this.getTabScroller()
      })
    } else {
      this.mdcTabScroller = MDCTabScroller.attachTo(this.$el)
    }
  },
  beforeDestroy () {

      tabScrollerFactory: MDCTabScrollerFactory = (el) => new MDCTabScroller(el),
  ) {

mounted() {
    this.foundation = new MDCTabScrollerFoundation({
      eventTargetMatchesSelector: (evtTarget, selector) => {
        return matches(evtTarget, selector);
      },
      addClass: className => this.$set(this.classes, className, true),

      removeClass: className => this.$delete(this.classes, className),
      addScrollAreaClass: className =>
        this.$set(this.areaClasses, className, true),
      setScrollAreaStyleProperty: (prop, value) =>
        this.$set(this.areaStyles, prop, value),
      setScrollContentStyleProperty: (prop, value) =>
        this.$set(this.contentStyles, prop, value),
      getScrollContentStyleValue: propName =>
        window.getComputedStyle(this.$refs.content).getPropertyValue(propName),
      setScrollAreaScrollLeft: scrollX =>
        (this.$refs.area.scrollLeft = scrollX),

computeHorizontalScrollbarHeight: () =>
        util.computeHorizontalScrollbarHeight(document),
    });