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

componentDidMount() {
    this.foundation_ = new MDCTabBarFoundation(this.adapter);
    this.foundation_.init();

    const {
      activeIndex,
      indexInView,
    } = this.props;
    if (this.tabList_[activeIndex]) {
      this.tabList_[activeIndex].activate({} /* previousIndicatorClientRect */);
    }
    this.foundation_.scrollIntoView(indexInView);
  }

componentDidMount() {
    this.foundation = new MDCTabBarFoundation(this.adapter);
    this.foundation.init();
    const {activeIndex, indexInView} = this.props;
    if (this.tabList[activeIndex]) {
      // new DOMRect is not IE11 compatible
      const defaultDOMRect = {
        bottom: 0,
        height: 0,
        left: 0,
        right: 0,
        top: 0,
        width: 0,
        x: 0,
        y: 0,
      };
      this.tabList[activeIndex].activate(defaultDOMRect /* previousIndicatorClientRect */);
    }

notifyTabActivated: (index: number) => {
        // Synchronize the tabs `activeIndex` to the foundation.
        // This is needed when a tab is changed via a click, for example.
        this.activeIndex = index;
        this.dispatchEvent(new CustomEvent(
            MDCTabBarFoundation.strings.TAB_ACTIVATED_EVENT,
            {detail: {index}, bubbles: true, cancelable: true}));
      },
    };

if (!this._indexIsInRange(previousActiveIndex)) {
          previousActiveIndex = this.activeTabIndex;
        }
        return this.tabs.toArray()[previousActiveIndex].computeIndicatorClientRect();
      },
      getTabDimensionsAtIndex: (index: number) => this.tabs.toArray()[index].computeDimensions(),
      getPreviousActiveTabIndex: () => this.tabs.toArray().findIndex((_) => _.active),
      getFocusedTabIndex: () =>
        this._platform.isBrowser ? this.tabs.toArray().findIndex(tab =>
          tab.elementRef.nativeElement === document.activeElement!) : -1,
      getIndexOfTabById: (id: string) => this.tabs.toArray().findIndex(tab => id === tab.id),
      getTabListLength: () => this.tabs.length,
      notifyTabActivated: (index: number) =>
        this.activated.emit({ source: this, index: index, tab: this.tabs.toArray()[index] })
    };
    return new MDCTabBarFoundation(adapter);
  }

notifyTabActivated: index => {
        emitCustomEvent(
          this.$el,
          MDCTabBarFoundation.strings.TAB_ACTIVATED_EVENT,
          { index },
          true,
        );

        this.$emit('change', index);
      },
    });

mounted () {
    this.updateSlot()
    this.mdcTabBar = MDCTabBar.attachTo(this.$el)

    this.slotObserver = new MutationObserver(() => this.updateSlot())
    this.slotObserver.observe(this.$el, {
      childList: true,
      subtree: true
    })
  },
  beforeDestroy () {

this.$nextTick(() => {
        this.mdcTabBar = MDCTabBar.attachTo(this.$el)
        this.mdcTabBar.focusOnActivate = this.focusOnActivate
        this.mdcTabBar.useAutomaticActivation = this.useAutomaticActivation
      })
    },

domReady(() => {
			//update first
			this.update()
			//init mdc tab
			this.data.tabBar = new MDCTabBar(this.shadowRoot.querySelector('.mdc-tab-bar'));
			this.data.tabBar.listen('MDCTabBar:activated', (e) => {
				let item = this.props.children[e.detail.index]
				this.fire('change', item.attributes)
			})
		})
	}

public componentDidMount() {
    super.componentDidMount();
    if (this.control) {
      this.MDComponent = new MDCTabBar(this.control);
    }
    this.afterComponentDidMount();
  }

getDefaultFoundation() {
    return new MDCTabBarFoundation(
      /** @type {!MDCTabBarAdapter} */ {
        scrollTo: (scrollX: number) => {
          this.tabScroller && this.tabScroller.scrollTo(scrollX);
        },

        incrementScroll: (scrollXIncrement: number) =>
          this.tabScroller &&
          this.tabScroller.incrementScroll(scrollXIncrement),
        getScrollPosition: () =>
          this.tabScroller ? this.tabScroller.getScrollPosition() : 0,
        getScrollContentWidth: () =>
          this.tabScroller ? this.tabScroller.getScrollContentWidth() : 0,
        getOffsetWidth: () => (this.root.ref ? this.root.ref.offsetWidth : 0),
        isRTL: () =>
          !!this.root.ref &&
          window