How to use @material/tab - 10 common examples

getDefaultFoundation() {
      return new MDCTabFoundation(
        /** @type {!MDCTabAdapter} */ {
          setAttr: (attr: string, value: any) =>
            this.root.setProp(attr as any, value),
          addClass: (className: string) => this.root.addClass(className),
          removeClass: (className: string) => this.root.removeClass(className),
          hasClass: (className: string) => this.root.hasClass(className),
          activateIndicator: (previousIndicatorClientRect: ClientRect) =>
            this.tabIndicator &&
            this.tabIndicator.activate(previousIndicatorClientRect),
          deactivateIndicator: () =>
            this.tabIndicator && this.tabIndicator.deactivate(),
          notifyInteracted: () => {
            const evt = this.emit(
              'onInteraction',
              { tabId: this.id },
              true /* bubble */

this.$nextTick(() => {
        this.updateSlot()
        this.mdcTab = MDCTab.attachTo(this.$el)
        if (this.index !== -1) { // within 
          this.replaceTabInstance(this.mdcTab, this.index)
        }
      })
    },

childList: true,
      subtree: true
    })

    this.classObserver = new MutationObserver(() => this.updateActive())
    this.classObserver.observe(this.$el, {
      attributes: true
    })
    if (this.getTabInstance instanceof Function) { // within 
      this.$nextTick(() => {
        [this.mdcTab, this.index] = this.getTabInstance(this.$el)
        this.assignProperties()
        this.updateSlot()
      })
    } else { // standalone tab
      this.mdcTab = MDCTab.attachTo(this.$el)
    }
  },
  beforeDestroy () {

notifyInteracted: () =>
        emitCustomEvent(
          this.$el,
          MDCTabFoundation.strings.INTERACTED_EVENT,
          { tabId: this.id },
          true /* bubble */,
        ),
      getOffsetLeft: () => this.$el.offsetLeft,

mounted() {
    this.id = this.vma_uid_;
    this.foundation = new MDCTabFoundation({
      setAttr: (attr, value) => this.$el.setAttribute(attr, value),
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => this.$el.classList.contains(className),
      activateIndicator: previousIndicatorClientRect => {
        this.$refs.tabIndicator.activate(previousIndicatorClientRect);
      },
      deactivateIndicator: () => {
        this.$refs.tabIndicator.deactivate();
      },
      notifyInteracted: () =>
        emitCustomEvent(
          this.$el,
          MDCTabFoundation.strings.INTERACTED_EVENT,
          { tabId: this.id },
          true /* bubble */,

const adapter: MDCTabAdapter = {
      setAttr: (attr: string, value: string) => this._getHostElement().setAttribute(attr, value),
      addClass: (className: string) => this._getHostElement().classList.add(className),
      removeClass: (className: string) => this._getHostElement().classList.remove(className),
      hasClass: (className: string) => this._getHostElement().classList.contains(className),
      activateIndicator: (previousIndicatorClientRect: ClientRect) =>
        this.tabIndicator.activate(previousIndicatorClientRect),
      deactivateIndicator: () => this.tabIndicator.deactivate(),
      notifyInteracted: () => this.interacted.emit({detail: {tabId: this.id, tab: this}}),
      getOffsetLeft: () => this._getHostElement().offsetLeft,
      getOffsetWidth: () => this._getHostElement().offsetWidth,
      getContentOffsetLeft: () => this.content.nativeElement.offsetLeft,
      getContentOffsetWidth: () => this.content.nativeElement.offsetWidth,
      focus: () => this._getHostElement().focus()
    };
    return new MDCTabFoundation(adapter);
  }

componentDidMount() {
    const {active, focusOnActivate} = this.props;
    this.foundation = new MDCTabFoundation(this.adapter);
    this.foundation.init();
    this.foundation.setFocusOnActivate(focusOnActivate!);
    if (active) {
      this.foundation.activate();
    }
  }

notifyInteracted: () => this.dispatchEvent(
          new CustomEvent(MDCTabFoundation.strings.INTERACTED_EVENT, {
            detail: {tabId: this.id},
            bubbles: true,
            composed: true,
            cancelable: true,
          })),
      getOffsetLeft: () => this.offsetLeft,

      tabFactory: MDCTabFactory = (el) => new MDCTab(el),
      tabScrollerFactory: MDCTabScrollerFactory = (el) => new MDCTabScroller(el),

destroy() {
    super.destroy();
    this.unlisten(MDCTabFoundation.strings.INTERACTED_EVENT, this.handleTabInteraction_);
    this.unlisten('keydown', this.handleKeyDown_);
    this.tabList_.forEach((tab) => tab.destroy());

    if (this.tabScroller_) {
      this.tabScroller_.destroy();
    }
  }