• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript overlay.OverlayContainer类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中@angular/cdk/overlay.OverlayContainer的典型用法代码示例。如果您正苦于以下问题:TypeScript OverlayContainer类的具体用法?TypeScript OverlayContainer怎么用?TypeScript OverlayContainer使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了OverlayContainer类的9个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: describe

describe('NzPopover', () => {
  let overlayContainer: OverlayContainer;
  let overlayContainerElement: HTMLElement;
  let demoAppFixture: ComponentFixture<DemoAppComponent>;
  let demoAppComponent: DemoAppComponent;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports: [ NzPopoverModule, NoopAnimationsModule ],
      declarations: [ DemoAppComponent ]
    });

    TestBed.compileComponents();
  }));

  beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
    overlayContainer = oc;
    overlayContainerElement = oc.getContainerElement();
  }));

  afterEach(() => {
    overlayContainer.ngOnDestroy();
  });

  beforeEach(() => {
    demoAppFixture = TestBed.createComponent(DemoAppComponent);
    demoAppComponent = demoAppFixture.componentInstance;
    demoAppFixture.detectChanges();
  });

  it('should show/hide normal tooltip', fakeAsync(() => {
    const featureKey = 'NORMAL';
    const triggerElement = demoAppComponent.normalTrigger.nativeElement;

    expect(overlayContainerElement.textContent).not.toContain(featureKey);

    // Move inside to trigger tooltip shown up
    dispatchMouseEvent(triggerElement, 'mouseenter');
    demoAppFixture.detectChanges();
    tick(150); // wait for the default 100ms delay
    demoAppFixture.detectChanges();
    tick();
    demoAppFixture.detectChanges();
    expect(overlayContainerElement.textContent).toContain(featureKey);

    // Move out from the trigger element to hide it
    dispatchMouseEvent(triggerElement, 'mouseleave');
    tick(100); // wait for the default 100ms delay
    demoAppFixture.detectChanges();
    tick(); // wait for next tick to hide
    expect(overlayContainerElement.textContent).not.toContain(featureKey);
  }));

  it('should show tooltip with custom template', fakeAsync(() => {
    const triggerElement = demoAppComponent.templateTrigger.nativeElement;

    dispatchMouseEvent(triggerElement, 'mouseenter');
    demoAppFixture.detectChanges();
    tick(150); // wait for the default 100ms delay
    demoAppFixture.detectChanges();
    tick();
    demoAppFixture.detectChanges();
    expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
  }));

  it('should show/hide tooltip by focus', fakeAsync(() => {
    const featureKey = 'FOCUS';
    const triggerElement = demoAppComponent.focusTrigger.nativeElement;

    dispatchMouseEvent(triggerElement, 'focus');
    demoAppFixture.detectChanges();
    expect(overlayContainerElement.textContent).toContain(featureKey);

    dispatchMouseEvent(triggerElement, 'blur');
    tick(100); // wait for the default 100ms delay
    demoAppFixture.detectChanges();
    tick(); // wait for next tick to hide
    expect(overlayContainerElement.textContent).not.toContain(featureKey);
  }));

  it('should show/hide tooltip by click', fakeAsync(() => {
    const featureKey = 'CLICK';
    const triggerElement = demoAppComponent.clickTrigger.nativeElement;

    dispatchMouseEvent(triggerElement, 'click');
    demoAppFixture.detectChanges();
    expect(overlayContainerElement.textContent).toContain(featureKey);

    dispatchMouseEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
    tick();
    demoAppFixture.detectChanges();
    tick(500); // Wait for animations
    demoAppFixture.detectChanges();
    tick();
    expect(overlayContainerElement.textContent).not.toContain(featureKey);
  }));

  it('should show/hide by nzVisible change', fakeAsync(() => {
    const featureKey = 'VISIBLE';
    demoAppComponent.visible = true;
//.........这里部分代码省略.........
开发者ID:fengyongqing,项目名称:ng-zorro-antd,代码行数:101,代码来源:nz-popover.spec.ts


示例2: beforeEach

 beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
   overlayContainer = oc;
   overlayContainerElement = oc.getContainerElement();
 }));
开发者ID:fengyongqing,项目名称:ng-zorro-antd,代码行数:4,代码来源:nz-popover.spec.ts


示例3: beforeEach

 beforeEach(inject([ NzNotificationService, OverlayContainer ], (m: NzNotificationService, oc: OverlayContainer) => {
   messageService = m;
   overlayContainer = oc;
   overlayContainerElement = oc.getContainerElement();
 }));
开发者ID:SrgGs,项目名称:ng-zorro-antd,代码行数:5,代码来源:nz-notification.spec.ts


示例4: describe

describe('NzNotification', () => {
  let messageService: NzNotificationService;
  let overlayContainer: OverlayContainer;
  let overlayContainerElement: HTMLElement;
  let demoAppFixture: ComponentFixture<DemoAppComponent>;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports     : [ NzNotificationModule, NoopAnimationsModule ],
      declarations: [ DemoAppComponent ],
      providers   : [ { provide: NZ_NOTIFICATION_CONFIG, useValue: { nzMaxStack: 2 } } ] // Override default config
    });

    TestBed.compileComponents();
  }));

  beforeEach(inject([ NzNotificationService, OverlayContainer ], (m: NzNotificationService, oc: OverlayContainer) => {
    messageService = m;
    overlayContainer = oc;
    overlayContainerElement = oc.getContainerElement();
  }));

  afterEach(() => {
    overlayContainer.ngOnDestroy();
  });

  beforeEach(() => {
    demoAppFixture = TestBed.createComponent(DemoAppComponent);
  });

  it('should open a message box with success', (() => {
    messageService.success('test-title', 'SUCCESS');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('SUCCESS');
    expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-success')).not.toBeNull();
  }));

  it('should open a message box with error', (() => {
    messageService.error('test-title', 'ERROR');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('ERROR');
    expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-error')).not.toBeNull();
  }));

  it('should open a message box with warning', (() => {
    messageService.warning('test-title', 'WARNING');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('WARNING');
    expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-warning')).not.toBeNull();
  }));

  it('should open a message box with info', (() => {
    messageService.info('test-title', 'INFO');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('INFO');
    expect(overlayContainerElement.querySelector('.ant-notification-notice-icon-info')).not.toBeNull();
  }));

  it('should open a message box with blank', (() => {
    messageService.blank('test-title', 'BLANK');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('BLANK');
    expect(overlayContainerElement.querySelector('.ant-notification-notice-icon')).toBeNull();
  }));

  it('should auto closed by 1s', fakeAsync(() => {
    messageService.create(null, null, 'EXISTS', { nzDuration: 1000 });
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('EXISTS');

    tick(1200 + 10); // Wait for animation with 200ms
    expect(overlayContainerElement.textContent).not.toContain('EXISTS');
  }));

  it('should not destroy when hovered', fakeAsync(() => {
    messageService.create(null, null, 'EXISTS', { nzDuration: 3000 });
    demoAppFixture.detectChanges();

    const messageElement = overlayContainerElement.querySelector('.ant-notification-notice');
    dispatchMouseEvent(messageElement, 'mouseenter');
    tick(50000);
    expect(overlayContainerElement.textContent).toContain('EXISTS');

    dispatchMouseEvent(messageElement, 'mouseleave');
    tick(5000);
    expect(overlayContainerElement.textContent).not.toContain('EXISTS');
  }));

  it('should not destroyed automatically but manually', fakeAsync(() => {
    const filledMessage = messageService.success('title', 'SUCCESS', { nzDuration: 0 });
    demoAppFixture.detectChanges();

    tick(50000);
    expect(overlayContainerElement.textContent).toContain('SUCCESS');
//.........这里部分代码省略.........
开发者ID:SrgGs,项目名称:ng-zorro-antd,代码行数:101,代码来源:nz-notification.spec.ts


示例5: describe

describe('NzPopover', () => {
  let overlayContainer: OverlayContainer;
  let overlayContainerElement: HTMLElement;
  let fixture;
  let component;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports     : [ NzPopoverModule, NoopAnimationsModule, NzToolTipModule, NzIconModule ],
      declarations: [ NzPopoverTestWrapperComponent, NzPopoverTestNewComponent ],
      providers   : [ { provide: NZ_ICONS, useValue: [ FileOutline ] } ]
    });

    TestBed.compileComponents();
  }));

  beforeEach(inject([ OverlayContainer ], (oc: OverlayContainer) => {
    overlayContainer = oc;
    overlayContainerElement = oc.getContainerElement();
  }));

  afterEach(() => {
    overlayContainer.ngOnDestroy();
  });

  describe('should not bring break changes', () => {
    beforeEach(() => {
      fixture = TestBed.createComponent(NzPopoverTestWrapperComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });

    it('should show/hide normal tooltip', fakeAsync(() => {
      const featureKey = 'NORMAL';
      const triggerElement = component.normalTrigger.nativeElement;

      expect(overlayContainerElement.textContent).not.toContain(featureKey);

      // Move inside to trigger tooltip shown up
      dispatchMouseEvent(triggerElement, 'mouseenter');
      fixture.detectChanges();
      tick(150); // wait for the default 100ms delay
      fixture.detectChanges();
      tick();
      fixture.detectChanges();
      expect(overlayContainerElement.textContent).toContain(featureKey);

      // Move out from the trigger element to hide it
      dispatchMouseEvent(triggerElement, 'mouseleave');
      tick(100); // wait for the default 100ms delay
      fixture.detectChanges();
      tick(); // wait for next tick to hide
      expect(overlayContainerElement.textContent).not.toContain(featureKey);
    }));

    it('should show tooltip with custom template', fakeAsync(() => {
      const triggerElement = component.templateTrigger.nativeElement;

      dispatchMouseEvent(triggerElement, 'mouseenter');
      fixture.detectChanges();
      tick(150); // wait for the default 100ms delay
      fixture.detectChanges();
      tick();
      fixture.detectChanges();
      expect(overlayContainerElement.querySelector('.anticon-file')).not.toBeNull();
    }));

    it('should show/hide tooltip by focus', fakeAsync(() => {
      const featureKey = 'FOCUS';
      const triggerElement = component.focusTrigger.nativeElement;

      dispatchMouseEvent(triggerElement, 'focus');
      fixture.detectChanges();
      expect(overlayContainerElement.textContent).toContain(featureKey);

      dispatchMouseEvent(triggerElement, 'blur');
      tick(100); // wait for the default 100ms delay
      fixture.detectChanges();
      tick(); // wait for next tick to hide
      expect(overlayContainerElement.textContent).not.toContain(featureKey);
    }));

    it('should show/hide tooltip by click', fakeAsync(() => {
      const featureKey = 'CLICK';
      const triggerElement = component.clickTrigger.nativeElement;

      dispatchMouseEvent(triggerElement, 'click');
      fixture.detectChanges();
      expect(overlayContainerElement.textContent).toContain(featureKey);

      dispatchMouseEvent(overlayContainerElement.querySelector('.cdk-overlay-backdrop'), 'click');
      tick();
      fixture.detectChanges();
      tick(500); // Wait for animations
      fixture.detectChanges();
      tick();
      expect(overlayContainerElement.textContent).not.toContain(featureKey);
    }));

    it('should show/hide by nzVisible change', fakeAsync(() => {
//.........这里部分代码省略.........
开发者ID:SrgGs,项目名称:ng-zorro-antd,代码行数:101,代码来源:nz-popover.spec.ts


示例6: describe

describe('NzMessage', () => {
  let messageService: NzMessageService;
  let overlayContainer: OverlayContainer;
  let overlayContainerElement: HTMLElement;
  let demoAppFixture: ComponentFixture<DemoAppComponent>;

  beforeEach(fakeAsync(() => {
    TestBed.configureTestingModule({
      imports: [ NzMessageModule, NoopAnimationsModule ],
      declarations: [ DemoAppComponent ],
      providers: [ { provide: NZ_MESSAGE_CONFIG, useValue: { nzMaxStack: 2 } } ] // Override default config
    });

    TestBed.compileComponents();
  }));

  beforeEach(inject([ NzMessageService, OverlayContainer ], (m: NzMessageService, oc: OverlayContainer) => {
    messageService = m;
    overlayContainer = oc;
    overlayContainerElement = oc.getContainerElement();
  }));

  afterEach(() => {
    overlayContainer.ngOnDestroy();
  });

  beforeEach(() => {
    demoAppFixture = TestBed.createComponent(DemoAppComponent);
  });

  it('should open a message box with success', (() => {
    messageService.success('SUCCESS');
    demoAppFixture.detectChanges();

    expect((overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement).style.zIndex).toBe('1010');
    expect(overlayContainerElement.textContent).toContain('SUCCESS');
    expect(overlayContainerElement.querySelector('.anticon-check-circle')).not.toBeNull();
  }));

  it('should open a message box with error', (() => {
    messageService.error('ERROR');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('ERROR');
    expect(overlayContainerElement.querySelector('.anticon-cross-circle')).not.toBeNull();
  }));

  it('should open a message box with warning', (() => {
    messageService.warning('WARNING');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('WARNING');
    expect(overlayContainerElement.querySelector('.anticon-exclamation-circle')).not.toBeNull();
  }));

  it('should open a message box with info', (() => {
    messageService.info('INFO');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('INFO');
    expect(overlayContainerElement.querySelector('.anticon-info-circle')).not.toBeNull();
  }));

  it('should open a message box with loading', (() => {
    messageService.loading('LOADING');
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('LOADING');
    expect(overlayContainerElement.querySelector('.anticon-loading')).not.toBeNull();
  }));

  it('should auto closed by 1s', fakeAsync(() => {
    messageService.create(null, 'EXISTS', { nzDuration: 1000 });
    demoAppFixture.detectChanges();

    expect(overlayContainerElement.textContent).toContain('EXISTS');

    tick(1200 + 10); // Wait for animation with 200ms
    expect(overlayContainerElement.textContent).not.toContain('EXISTS');
  }));

  it('should not destroy when hovered', fakeAsync(() => {
    messageService.create(null, 'EXISTS', { nzDuration: 3000 });
    demoAppFixture.detectChanges();

    const messageElement = overlayContainerElement.querySelector('.ant-message-notice');
    dispatchMouseEvent(messageElement, 'mouseenter');
    tick(1000);
    expect(overlayContainerElement.textContent).toContain('EXISTS');

    dispatchMouseEvent(messageElement, 'mouseleave');
    tick(5000);
    expect(overlayContainerElement.textContent).not.toContain('EXISTS');
  }));

  it('should not destroyed automatically but manually', fakeAsync(() => {
    const filledMessage = messageService.success('SUCCESS', { nzDuration: 0 });
    demoAppFixture.detectChanges();

    tick(50000);
//.........这里部分代码省略.........
开发者ID:,项目名称:,代码行数:101,代码来源:


示例7: ngOnInit

  ngOnInit(): void {
    let theme = 'light-custom-theme';

    if (this.storageService.hasTheme()) {
      theme = this.storageService.getTheme();
    } else {
      this.storageService.setTheme(theme);
    }

    document.body.classList.add(theme, 'mat-app-background');
    this.overlay.getContainerElement().classList.add(theme);
  }
开发者ID:a-vzhik,项目名称:white-raven,代码行数:12,代码来源:app.component.ts


示例8: afterEach

 afterEach(() => {
   overlayContainer.ngOnDestroy();
 });
开发者ID:fengyongqing,项目名称:ng-zorro-antd,代码行数:3,代码来源:nz-popover.spec.ts


示例9:

 configurationService.getApplicationConfiguration().subscribe((conf) => {
   overlayContainer.getContainerElement().classList.add(conf.application.theme + '-theme')
 })
开发者ID:bkimminich,项目名称:juice-shop,代码行数:3,代码来源:app.module.ts



注:本文中的@angular/cdk/overlay.OverlayContainer类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript overlay.OverlayRef类代码示例发布时间:2022-05-28
下一篇:
TypeScript overlay.Overlay类代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap