How to use the @material/toolbar.MDCToolbarFoundation function in @material/toolbar

To help you get started, we’ve selected a few @material/toolbar 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 / toolbar / mdc.toolbar.directive.ts View on Github external
setStyle: (property: string, value: number) => {
            this.renderer.setStyle(this.root.nativeElement, property, value);
        },
        setStyleForTitleElement: (property: string, value: number) => {
            if (this._title)
                this.renderer.setStyle(this._title._elm.nativeElement, property, value);
        },
        setStyleForFlexibleRowElement: (property: string, value: number) => {
            this.renderer.setStyle(this._firstRow._elm.nativeElement, property, value);
        },
        setStyleForFixedAdjustElement: (property: string, value: number) => {
            if (this.fixedAdjust)
                this.renderer.setStyle(this.fixedAdjust._elm.nativeElement, property, value);
        }
    };
    private foundation: { init: Function, destroy: Function } = new MDCToolbarFoundation(this.mdcAdapter);

    constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry,
        private zone: NgZone) {
    }

    ngAfterViewInit() {
        // Using ngAfterViewInit instead of ngAfterContentInit, because the MDCToolbarFoundation.init
        // uses MdcToolbarAdapter.hasClass on classes that we bind in this component. Those classes are only
        // available after the view is fully initialized.
        // TODO: in other components we just check the property value instead of the class (property based on
        //   the classname given to the adapter), so that ngAfterContentInit can be used after all. That
        //   seems a nicer strategy.
        this._initialized = true;
        this.initFixedScroll();
        this.foundation.init();
    }
github trimox / angular-mdc-web / src / lib / toolbar / toolbar.ts View on Github external
},
    setStyleForFixedAdjustElement: (property: string, value: string) => {
      if (!isBrowser()) { return; }

      if (this.adjustBodyMargin && this.fixed) {
        this._renderer.setStyle(this._fixedAdjustElement ?
          this._fixedAdjustElement : document.body, property, value);
      }
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    updateAdjustElementStyles(): void
  } = new MDCToolbarFoundation(this._mdcAdapter);

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

  ngOnChanges(changes: { [key: string]: SimpleChange }): void {
    const fixedAdjustElement = changes['fixedAdjustElement'];

    if (fixedAdjustElement) {
      if (fixedAdjustElement.currentValue) {
        this._renderer.addClass(fixedAdjustElement.currentValue, 'mdc-toolbar-fixed-adjust');
      }
      if (fixedAdjustElement.previousValue) {
        this._renderer.removeClass(fixedAdjustElement.previousValue, 'mdc-toolbar-fixed-adjust');
github jamesmfriedman / rmwc / src / toolbar / index.tsx View on Github external
getDefaultFoundation() {
    return new MDCToolbarFoundation({
      hasClass: (className: string) =>
        !!this.root.ref && this.root.ref.classList.contains(className),
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className),
      registerScrollHandler: (handler: SpecificEventListener<'scroll'>) => {
        this.window.addEventListener('scroll', handler);
      },
      deregisterScrollHandler: (handler: SpecificEventListener<'scroll'>) =>
        this.window.removeEventListener('scroll', handler),
      registerResizeHandler: (handler: SpecificEventListener<'resize'>) =>
        this.window.addEventListener('resize', handler),
      deregisterResizeHandler: (handler: SpecificEventListener<'resize'>) =>
        this.window.removeEventListener('resize', handler),
      getViewportWidth: () => this.window.innerWidth,
      getViewportScrollY: () => this.window.pageYOffset,
      getOffsetHeight: () => (this.root.ref ? this.root.ref.offsetHeight : 0),