How to use the @material/tabs.MDCTabBarScrollerFoundation 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 trimox / angular-mdc-web / packages / tabs / tab-bar-scroller.ts View on Github external
if (this.scrollFrame && this.scrollFrame.tabBar) {
        this._renderer.setStyle(this.scrollFrame.tabBar.elementRef.nativeElement, getCorrectPropertyName(window, 'transform'), value);
      }
    },
    getOffsetLeftForEventTarget: (target: HTMLElement) => target.offsetLeft,
    getOffsetWidthForEventTarget: (target: HTMLElement) => target.offsetWidth
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    layout(): void,
    scrollForward(evt?: Event): void,
    scrollBack(evt?: Event): void,
    scrollToTabAtIndex(index: number): void,
  } = new MDCTabBarScrollerFoundation(this._mdcAdapter);

  constructor(
    private _renderer: Renderer2,
    public elementRef: ElementRef,
    private _registry: EventRegistry) { }

  ngAfterViewInit(): void {
    this._foundation.init();
  }

  ngAfterContentInit(): void {
    this._tabBarChangeSubscription = this.scrollFrame.tabBar.tabsChangeEvent.subscribe(() => {
      this.layout();
    });
  }
github src-zone / material / bundle / src / components / tabs / mdc.tab.bar.scroller.directive.ts View on Github external
if (this._scrollFrame)
                this._rndr.setProperty(this._scrollFrame._el.nativeElement, 'scrollLeft', scrollLeftAmount);
        },
        getOffsetWidthForTabBar: () => {
            if (this._scrollFrame && this._scrollFrame._tabBar)
                return this._scrollFrame._tabBar._el.nativeElement.offsetWidth;
            return 0;
        },
        setTransformStyleForTabBar: (value: string) => {
            if (this._scrollFrame && this._scrollFrame._tabBar)
                this._rndr.setStyle(this._scrollFrame._tabBar._el.nativeElement, getCorrectPropertyName(window, 'transform'), value);
        },
        getOffsetLeftForEventTarget: (target: HTMLElement) => target.offsetLeft,
        getOffsetWidthForEventTarget: (target: HTMLElement) => target.offsetWidth
    }
    private _foundation = new MDCTabBarScrollerFoundation(this._adapter);

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

    ngAfterContentInit() {
        this._foundation.init();
    }

    ngOnDestroy() {
        this._foundation.destroy();
    }

    private _tabAt(index: number) {
        if (this._scrollFrame)
            return this._scrollFrame._tabAt(index);
        return null;