How to use the @material/tabs.MDCTabFoundation 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.directive.ts View on Github external
@ContentChild(MdcTabIconDirective) _mdcTabIcon: MdcTabIconDirective;
    @ContentChild(MdcTabIconTextDirective) _mdcTabIconText: MdcTabIconTextDirective;
    /**
     * Event called when the tab is activated.
     */
    @Output() activate: EventEmitter = new EventEmitter();
    protected _adapter: MdcTabAdapter = {
        addClass: (className: string) => this._rndr.addClass(this._root.nativeElement, className),
        removeClass: (className: string) => this._rndr.removeClass(this._root.nativeElement, className),
        registerInteractionHandler: (type: string, handler: EventListener) => this._registry.listen(this._rndr, type, handler, this._root),
        deregisterInteractionHandler: (type: string, handler: EventListener) => this._registry.unlisten(type, handler),
        getOffsetWidth: () => this._root.nativeElement.offsetWidth,
        getOffsetLeft: () => this._root.nativeElement.offsetLeft,
        notifySelected: () => this.activate.emit({tab: this, tabIndex: null})
    };
    _foundation = new MDCTabFoundation(this._adapter);

    constructor(protected _rndr: Renderer2, protected _root: ElementRef, protected _registry: MdcEventRegistry) {
        super(_root, _rndr, _registry);
    }

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

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

    @HostBinding('class.mdc-tab--with-icon-and-text')
github trimox / angular-mdc-web / packages / tabs / tab.ts View on Github external
getOffsetWidth: () => this._getHostElement().offsetWidth,
    getOffsetLeft: () => this._getHostElement().offsetLeft,
    notifySelected: () => this._emitSelectedEvent()
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    isActive(): boolean,
    setActive(isActive: boolean): void,
    getComputedWidth(): number,
    getComputedLeft(): number,
    preventsDefaultOnClick(): boolean,
    setPreventDefaultOnClick(preventDefaultOnClick: boolean): void,
    measureSelf(): void,
  } = new MDCTabFoundation(this._mdcAdapter);

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

  ngOnInit(): void {
    this._foundation.init();
    this.setPreventDefaultOnClick(true);

    if (this.tabRouter) {
      this._routerChangeSubscription = this.tabRouter.routeChange
        .pipe(takeUntil(this._destroy))
        .subscribe((_: MdcRouteEvent) => {
github fintechstudios / angularjs-mdc / src / mdc-tabs / tab.js View on Github external
getDefaultFoundation() {
    return new MDCTabFoundation({
      addClass: (className) => this.root_.classList.add(className),
      removeClass: (className) => this.root_.classList.remove(className),
      registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler),
      deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler),
      getOffsetWidth: () => this.root_.offsetWidth,
      getOffsetLeft: () => this.root_.offsetLeft,
      notifySelected: () => this.onSelect_(),
    });
  }