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

mounted () {
    if (!(this.getIndicator instanceof Function)) { // standalone
      this.mdcTabIndicator = MDCTabIndicator.attachTo(this.$el)
    }
    // todo: get instance from parent  when mounted
  },
  beforeDestroy () {

autoInit.register('MDCChipSet', chips.MDCChipSet);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCRipple', ripple.MDCRipple);
autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
autoInit.register('MDCTab_', tab.MDCTab);
autoInit.register('MDCTabIndicator', tabIndicator.MDCTabIndicator);
autoInit.register('MDCTab', tabs.MDCTab);
autoInit.register('MDCTabBar', tabs.MDCTabBar);
autoInit.register('MDCTextField', textField.MDCTextField);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);
autoInit.register('MDCToolbar', toolbar.MDCToolbar);
autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);

// Export all components.
export {
  autoInit,
  base,
  checkbox,
  chips,
  dialog,

componentDidMount() {
    if (this.props.fade) {
      this.foundation = new MDCFadingTabIndicatorFoundation(this.adapter);
    } else {
      this.foundation = new MDCSlidingTabIndicatorFoundation(this.adapter);
    }
    this.foundation.init();
    if (this.props.active) {
      this.foundation.activate();
    }
  }

mounted() {
    this.adapter_ = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      computeContentClientRect: () =>
        this.$refs.content.getBoundingClientRect(),
      setContentStyleProperty: (prop, value) => {
        this.$set(this.styles, prop, value);
      },
    };

    this.foundation = new MDCTabIndicatorFoundation(this.adapter_);
    this.foundation.init();
  },
  beforeDestroy() {

componentDidMount() {
    if (this.props.fade) {
      this.foundation = new MDCFadingTabIndicatorFoundation(this.adapter);
    } else {
      this.foundation = new MDCSlidingTabIndicatorFoundation(this.adapter);
    }
    this.foundation.init();
    if (this.props.active) {
      this.foundation.activate();
    }
  }

this.root.removeClass(className);
      },
      computeContentClientRect: () =>
        this.content.ref
          ? this.content.ref.getBoundingClientRect()
          : ({} as ClientRect),
      setContentStyleProperty: (prop: string, value: string) => {
        this.content.setStyle(prop, value);
      }
    };

    if (this.props.transition === 'fade') {
      return new MDCFadingTabIndicatorFoundation(adapter);
    }

    return new MDCSlidingTabIndicatorFoundation(adapter);
  }

getDefaultFoundation() {
    const adapter: MDCTabIndicatorAdapter = {
      addClass: (className: string) => this._getHostElement().classList.add(className),
      removeClass: (className: string) => this._getHostElement().classList.remove(className),
      computeContentClientRect: () => {
        if (!this._platform.isBrowser) { return { height: 0, width: 0, bottom: 0, top: 0, left: 0, right: 0 }; }
        return this.content.nativeElement.getBoundingClientRect();
      },
      setContentStyleProperty: (propName: string, value: string) =>
        this.content.nativeElement.style.setProperty(propName, value)
    };
    return this._fade ? new MDCFadingTabIndicatorFoundation(adapter) : new MDCSlidingTabIndicatorFoundation(adapter);
  }

rootEl.removeClass(className);
        },
        computeContentClientRect: () =>
          contentEl.ref
            ? contentEl.ref.getBoundingClientRect()
            : emptyClientRect,
        setContentStyleProperty: (prop: string, value: string) => {
          contentEl.setStyle(prop, value);
        }
      };

      if (props.transition === 'fade') {
        return new MDCFadingTabIndicatorFoundation(adapter);
      }

      return new MDCSlidingTabIndicatorFoundation(adapter);
    },
    api: ({

constructor(private _hostElement: HTMLElement, private _document: Document) {
    this._foundation = new MDCSlidingTabIndicatorFoundation(this._adapter);
  }

rootEl.addClass(className);
        },
        removeClass: (className: string) => {
          rootEl.removeClass(className);
        },
        computeContentClientRect: () =>
          contentEl.ref
            ? contentEl.ref.getBoundingClientRect()
            : emptyClientRect,
        setContentStyleProperty: (prop: string, value: string) => {
          contentEl.setStyle(prop, value);
        }
      };

      if (props.transition === 'fade') {
        return new MDCFadingTabIndicatorFoundation(adapter);
      }

      return new MDCSlidingTabIndicatorFoundation(adapter);
    },
    api: ({