本文整理匯總了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());
}示例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
}
}示例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',
}]);
}示例4: createModal
// Create component to ApplicationRef
private createModal(): void {
this.overlayRef = this.overlay.create();
this.modalRef = this.overlayRef.attach(new ComponentPortal(NzModalComponent));
}示例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
}
}