How to use the @material/tabs.MDCTabBarFoundation function in @material/tabs

To help you get started, we’ve selected a few @material/tabs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github src-zone / material / bundle / src / components / tabs / mdc.tab.bar.directive.ts View on Github external
setStyleForIndicator: (propertyName: string, value: string) => this._rndr.setStyle(this._indicator, propertyName, value),
        getOffsetWidthForIndicator: () => this._indicator.offsetWidth,
        notifyChange: (evtData: {activeTabIndex: number}) => {
            this.tabChange.emit({tab: null, tabIndex: evtData.activeTabIndex});
        },
        getNumberOfTabs: () => this._tabs.length,
        isTabActiveAtIndex: (index: number) => index >= 0 ? this._tabs.toArray()[index]._active : false,
        setTabActiveAtIndex: (index: number, isActive = true) => this._tabs.toArray()[index]._active = isActive,
        isDefaultPreventedOnClickForTabAtIndex: (index: number) => !!this._tabs.toArray()[index]._foundation.preventsDefaultOnClick,
        setPreventDefaultOnClickForTabAtIndex: (index: number, preventDefaultOnClick: boolean) => this._tabs.toArray()[index]._foundation.setPreventDefaultOnClick(preventDefaultOnClick),
        measureTabAtIndex: (index: number) => this._tabs.toArray()[index]._foundation.measureSelf(),
        getComputedWidthForTabAtIndex: (index: number) => this._tabs.toArray()[index]._foundation.getComputedWidth(),
        getComputedLeftForTabAtIndex: (index: number) => this._tabs.toArray()[index]._foundation.getComputedLeft()
    };
    private _subscriptions: Subscription[];
    private _foundation = new MDCTabBarFoundation(this._adapter);

    constructor(private _rndr: Renderer2, public _el: ElementRef, private registry: MdcEventRegistry) {
    }

    ngAfterContentInit() {
        this._tabs.changes.subscribe(() => {
            if (this._subscriptions)
                // make sure we update the tab change event subscriptions:
                this._listenTabSelected();
        });
        this.addIndicator();
        this._foundation.init();
    }

    ngOnDestroy() {
        this._foundation.destroy();
github trimox / angular-mdc-web / packages / tabs / tab-bar.ts View on Github external
measureTabAtIndex: (index: number) => this.tabs.toArray()[index].measureSelf(),
    getComputedWidthForTabAtIndex: (index: number) => {
      return this.tabs.length ? this.tabs.toArray()[index].getComputedWidth() : -1;
    },
    getComputedLeftForTabAtIndex: (index: number) => {
      return this.tabs.length ? this.tabs.toArray()[index].getComputedLeft() : -1;
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    layout(): void,
    switchToTabAtIndex(index: number, shouldNotify: boolean): void,
    getActiveTabIndex(): number
  } = new MDCTabBarFoundation(this._mdcAdapter);

  constructor(
    private _ngZone: NgZone,
    private _changeDetectorRef: ChangeDetectorRef,
    private _renderer: Renderer2,
    public elementRef: ElementRef,
    private _registry: EventRegistry) { }

  ngAfterContentInit(): void {
    // Subscribe to changes in the amount of tabs, in order to be
    // able to re-render the content as new tabs are added or removed.
    this.tabs.changes.pipe(startWith(null), takeUntil(this._destroy)).subscribe(() => {
      this._foundation.init();

      this._initializeSelection();
      this.setDisableRipple(this.disableRipple);
github fintechstudios / angularjs-mdc / src / mdc-tabs / tab-bar.js View on Github external
getDefaultFoundation() {
    return new MDCTabBarFoundation({
      addClass: (className) => this.root_.classList.add(className),
      removeClass: (className) => this.root_.classList.remove(className),
      bindOnMDCTabSelectedEvent: () => this.listen(
        MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      unbindOnMDCTabSelectedEvent: () => this.unlisten(
        MDCTabFoundation.strings.SELECTED_EVENT, this.tabSelectedHandler_),
      registerResizeHandler: (handler) => this.$window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler) => this.$window.removeEventListener('resize', handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      setStyleForIndicator: (propertyName, value) => this.indicator_.style.setProperty(propertyName, value),
      getOffsetWidthForIndicator: () => this.indicator_.offsetWidth,
      notifyChange: (evtData) => this.emit(MDCTabBarFoundation.strings.CHANGE_EVENT, evtData),
      getNumberOfTabs: () => this.tabs.length,
      isTabActiveAtIndex: (index) => this.tabs[index] && this.tabs[index].isActive,
      setTabActiveAtIndex: (index, isActive) => {
        if (this.tabs[index]) {