TypeScript overlay.Overlay类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

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

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

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

示例1: ngAfterViewInit

 ngAfterViewInit() {
   this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
   this._overlayRef = this._overlay.create({
     positionStrategy: this._overlay.position().global().centerHorizontally().centerVertically(),
     hasBackdrop: true
   });
   this._overlayRef.backdropClick().subscribe(() => this._overlayRef.detach());
 }

开发者ID:Nodarii，项目名称:material2，代码行数:8，代码来源:cdk-drag-drop-root-element-example.ts

示例2: ConnectionPositionPair

    return (editor: EditorService) => {
        const pluginState: CodeBlockState = pluginKey.getState(editor.state)
        const origin = pluginState.element

        if (!pluginState.toolbarVisible) {
            overlayRef.detach()
            return
        }

        const toolbar = new FloatingToolbar(editor, overlayRef)
        const injector = Injector.create({
            parent: parentInjector,
            providers: [
                {
                    provide: FloatingToolbar,
                    useValue: toolbar,
                },
                {
                    provide: EditorToolbar,
                    useValue: toolbar,
                },
            ],
        })
        const linkPanelPortal = new ComponentPortal(CodePanelComponent, null, injector)
        const positions = [
            new ConnectionPositionPair(
                { originX: "center", originY: "bottom" },
                { overlayX: "center", overlayY: "top" },
            ),
        ]

        if (previousOrigin !== origin) {
            overlayRef.detach()
        }

        if (!overlayRef.hasAttached()) {
            overlayRef.attach(linkPanelPortal)

            const strategy = overlay
                .position()
                .flexibleConnectedTo(origin)
                .withFlexibleDimensions(false)
                .withPush(false)
                .withPositions(positions)

            const scrollStrategy = overlay.scrollStrategies.reposition()

            strategy.attach(overlayRef)
            strategy.apply()

            scrollStrategy.attach(overlayRef)
            scrollStrategy.enable()

            overlayRef.updatePositionStrategy(strategy)

            previousOrigin = origin
        }
    }

开发者ID:zodiac-team，项目名称:zodiac-ui，代码行数:58，代码来源:code-panel.component.ts

示例3: positionStrategyForCells

 positionStrategyForCells(cells: HTMLElement[]): PositionStrategy {
   return this.overlay.position()
       .flexibleConnectedTo(cells[0])
       .withGrowAfterOpen()
       .withPush()
       .withViewportMargin(16)
       .withPositions([{
         originX: 'start',
         originY: 'top',
         overlayX: 'start',
         overlayY: 'top',
       }]);
 }

开发者ID:Nodarii，项目名称:material2，代码行数:13，代码来源:popover-edit-position-strategy-factory.ts

示例4: createModal

 // Create component to ApplicationRef
 private createModal(): void {
   this.overlayRef = this.overlay.create();
   this.modalRef = this.overlayRef.attach(new ComponentPortal(NzModalComponent));
 }

开发者ID:，项目名称:，代码行数:5，代码来源:

示例5: ConnectionPositionPair

    return (editor: EditorService) => {
        const pluginState: HyperlinkState = pluginKey.getState(editor.state)
        const { link } = editor.state.schema.marks
        let origin
        let previousOrigin

        if (!pluginState.activeLinkMark || !link) {
            overlayRef.detach()
            return
        }

        const toolbar = new FloatingToolbar(editor, overlayRef)
        const injector = Injector.create({
            parent: parentInjector,
            providers: [
                {
                    provide: FloatingToolbar,
                    useValue: toolbar,
                },
                {
                    provide: EditorToolbar,
                    useValue: toolbar,
                },
            ],
        })
        const linkPanelPortal = new ComponentPortal(LinkPanelComponent, null, injector)
        const positions = [
            new ConnectionPositionPair(
                { originX: "start", originY: "bottom" },
                { overlayX: "start", overlayY: "top" },
            ),
            new ConnectionPositionPair(
                { originX: "start", originY: "top" },
                { overlayX: "start", overlayY: "bottom" },
            ),
        ]

        switch (pluginState.activeLinkMark.type) {
            case InsertStatus.EDIT_LINK_TOOLBAR: {
                const el = editor.view.nodeDOM(pluginState.activeLinkMark.pos)
                origin = el.parentElement as HTMLElement

                break
            }
            case InsertStatus.INSERT_LINK_TOOLBAR: {
                const el = editor.view.domAtPos(pluginState.activeLinkMark.from)
                origin = el.node as HTMLElement
                break
            }
            default:
        }

        if (previousOrigin !== origin) {
            overlayRef.detach()
        }

        if (!overlayRef.hasAttached()) {
            overlayRef.attach(linkPanelPortal)

            const strategy = overlay
                .position()
                .flexibleConnectedTo(origin)
                .withFlexibleDimensions(false)
                .withPush(false)
                .withPositions(positions)

            const scrollStrategy = overlay.scrollStrategies.reposition()

            strategy.attach(overlayRef)
            strategy.apply()

            scrollStrategy.attach(overlayRef)
            scrollStrategy.enable()

            overlayRef.updatePositionStrategy(strategy)

            previousOrigin = origin
        }
    }

开发者ID:zodiac-team，项目名称:zodiac-ui，代码行数:79，代码来源:link-panel.component.ts

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