La estrategia de desplazamiento determina cómo se maneja el desplazamiento en el IgxOverlayService
proporcionado. Hay cuatro estrategias de desplazamiento:
NoOperation : no hace nada.
Bloquear : el evento se cancela y el componente no se desplaza con la ventana.
Cerrar : utiliza una tolerancia y cierra un componente expandido al desplazarse si se excede la tolerancia.
Absoluto : desplaza todo.
Uso
Cada estrategia de desplazamiento tiene los siguientes métodos:
initialize
: inicializa la estrategia de desplazamiento. Necesita una referencia del documento, el servicio de superposición y la identificación del componente representado.
attach
: adjunta la estrategia de desplazamiento al elemento especificado o al documento
detach
: separa la estrategia de desplazamiento
this .scrollStrategy.initialize(document , overlayService, id);
this .scrollStrategy.attach();
this .scrollStrategy.detach();
typescript
Empezando
La estrategia de desplazamiento se pasa como una propiedad en el parámetro overlaySettings
cuando se llama al método overlay.attach()
:
const overlaySettings: OverlaySettings = {
positionStrategy : new GlobalPositionStrategy(),
scrollStrategy : new AbsoluteScrollStrategy(),
modal : true ,
closeOnOutsideClick : true
}
const overlayId = overlay.attach(dummyElement, overlaySettings);
typescript
Para cambiar la estrategia de desplazamiento utilizada por la superposición, anule la propiedad scrollStrategy
del objeto overlaySettings
pasado a la superposición. Si ya se adjuntó una estrategia, debe separar el ID generado anteriormente:
const newOverlaySettings = Object .assing({}, overlaySettings);
Object .assing(newOverlaySettings, {
scrollStrategy : new CloseScrollStrategy()
})
const overlayId = overlay.attach(dummyElement, newOverlaySettings);
overlay.show(overlayId);
typescript
dependencias
Para utilizar cualquiera de las estrategias de desplazamiento, impórtelo así:
import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy" ;
typescript
Las estrategias de desplazamiento se pueden pasar al objeto overlaySettings
para determinar cómo la superposición debe manejar el desplazamiento. La siguiente demostración ilustra la diferencia entre las scrollStrategies
independientes:
import { Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core' ;
import { AbsoluteScrollStrategy, BlockScrollStrategy, CloseScrollStrategy, ConnectedPositioningStrategy, IgxOverlayService, NoOpScrollStrategy, IgxIconComponent } from 'igniteui-angular' ;
import { Subject } from 'rxjs' ;
import { takeUntil } from 'rxjs/operators' ;
import { MyDynamicCardComponent } from '../overlay-dynamic-card/overlay-dynamic-card.component' ;
@Component ({
selector : 'app-overlay-sample' ,
styleUrls : ['./overlay-scroll-sample-2.component.scss' ],
templateUrl : './overlay-scroll-sample-2.component.html' ,
providers : [IgxOverlayService],
imports : [IgxIconComponent, MyDynamicCardComponent]
})
export class OverlayScrollSample2Component implements OnInit , OnDestroy {
@ViewChild ('scrollDemo' , { static : true })
public scrollDemo: ElementRef;
@ViewChild (MyDynamicCardComponent, { static : true })
public overlayDemo: MyDynamicCardComponent;
@ViewChild ('mainContainer' , { static : true })
public mainContainer: ElementRef;
public previewHidden = false ;
private destroy$ = new Subject<boolean >();
private _overlayId: string ;
private _target: HTMLElement;
constructor (
@Inject (IgxOverlayService) private overlay: IgxOverlayService,
private viewContainerRef: ViewContainerRef
) {
this .overlay.opening
.pipe(takeUntil(this .destroy$))
.subscribe(() => this .previewHidden = true );
this .overlay
.closed
.pipe(takeUntil(this .destroy$))
.subscribe(() => this .previewHidden = false );
}
public ngOnInit(): void {
(this .mainContainer.nativeElement as HTMLElement).style.height = '450px' ;
this .overlay.opening.subscribe(() => {
this .previewHidden = true ;
});
this .overlay.closing.subscribe(() => {
this .previewHidden = false ;
});
}
public onClickScrollStrategy (strategy: string ) {
let scrollStrategy;
const positionStrategy = new ConnectedPositioningStrategy();
switch (strategy) {
case ('absolute' ):
scrollStrategy = new AbsoluteScrollStrategy();
this ._target = this .scrollDemo.nativeElement.children[0 ];
break ;
case ('block' ):
scrollStrategy = new BlockScrollStrategy();
this ._target = this .scrollDemo.nativeElement.children[1 ];
break ;
case ('close' ):
scrollStrategy = new CloseScrollStrategy();
this ._target = this .scrollDemo.nativeElement.children[2 ];
break ;
default :
scrollStrategy = new NoOpScrollStrategy();
this ._target = this .scrollDemo.nativeElement.children[3 ];
}
if (this ._overlayId) {
this .overlay.detach(this ._overlayId);
delete this ._overlayId;
}
this ._overlayId = this .overlay.attach(MyDynamicCardComponent, this .viewContainerRef, {
target : this ._target,
positionStrategy,
scrollStrategy,
modal : false ,
closeOnOutsideClick : true
});
this .overlay.show(this ._overlayId);
}
public ngOnDestroy(): void {
this .destroy$.next(true );
this .destroy$.complete();
if (this ._overlayId) {
this .overlay.detach(this ._overlayId);
delete this ._overlayId;
}
}
}
ts コピー <div class ='overlay-sample' #mainContainer >
<div class ='container' >
<div class ='container__row' >
<div class ='section__row--wide' >
<div class ='section__container--wide' #scrollDemo >
<span (click )="onClickScrollStrategy('absolute')" >
<igx-icon > notifications</igx-icon >
<p > Absolute</p >
</span >
<span (click )="onClickScrollStrategy('block')" >
<igx-icon > notifications</igx-icon >
<p > Block</p >
</span >
<span (click )="onClickScrollStrategy('close')" >
<igx-icon > notifications</igx-icon >
<p > Close</p >
</span >
<span (click )="onClickScrollStrategy('')" >
<igx-icon > notifications</igx-icon >
<p > None</p >
</span >
</div >
</div >
</div >
</div >
<div class ='container' [hidden ]="previewHidden" >
<app-overlay-dynamic-card-component > </app-overlay-dynamic-card-component >
</div >
</div >
html コピー body {
overflow-y : scroll !important ;
}
.overlay-sample {
padding : 32px 0px 32px 32px ;
display : flex;
flex-direction : row;
height : 200px ;
overflow-y : scroll;
}
.container__row > div , .section__container--wide > span , .section__position-element > div {
display : inline-block;
}
.section__row--wide , .container__row , .section__header {
width : 100% ;
}
.section__row > span {
height : 48px ;
}
.section__row--wide , .section__container--wide > span {
height : 80px ;
max-width : 320px ;
}
span :hover {
border : 1px solid #e41c77 ;
box-sizing : border-box;
cursor : pointer;
}
.section__container--wide {
align-content : flex-start;
display : flex;;
}
.section__container--wide > span {
text-align : center;
vertical-align : middle;
line-height : 12px ;
font-weight : 500 ;
width : 80px ;
padding-top : 16px ;
p {
margin-top : 0px ;
}
}
.section__position-element , .section__position-header {
width : 144px ;
text-align : center;
}
.section__separator {
width : 32px ;
}
.container {
width : 50% ;
height : 600px ;
display : flex;
flex-direction : column;
align-items : center;
}
.overlay__element {
width : 288px ;
height : 144px ;
}
.section__header {
max-height : 96px ;
text-align : left;
font-weight : 700 ;
font-size : 16px ;
}
.container__row {
height : 100% ;
text-align : left;
margin-top : 16px ;
}
.section__position-element , .section__row--wide {
box-shadow : 0 1px 3px 0 rgba(0 , 0 , 0 , 0.2 ), 0 1px 1px 0 rgba(0 , 0 , 0 , 0.14 ), 0 2px 1px -1px rgba(0 , 0 , 0 , 0.12 );
}
scss コピー
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Modal
El objeto overlaySettings
también permite pasar una propiedad booleana (modal
). Esto controla cómo se mostrará la superposición:
Si la propiedad modal
es false
, el elemento se adjuntará al primer plano del DOM pero todo seguirá activo e interactuable (por ejemplo, desplazarse, hacer clic, etc.).
Si la propiedad modal
es true
, el elemento se adjuntará al primer plano del DOM y un bloqueador de superposición se colocará detrás de él, deteniendo la propagación de todos los eventos:
import { Component, ElementRef, Inject, OnDestroy, ViewChild } from '@angular/core' ;
import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrategy, ElasticPositionStrategy, GlobalPositionStrategy, HorizontalAlignment, IgxOverlayService, OverlaySettings, PositionSettings, VerticalAlignment, IgxSwitchComponent, IgxIconComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective } from 'igniteui-angular' ;
import { FormsModule } from '@angular/forms' ;
@Component ({
selector : 'app-overlay-sample' ,
styleUrls : ['./overlay-scroll-sample-1.component.scss' ],
templateUrl : './overlay-scroll-sample-1.component.html' ,
providers : [IgxOverlayService],
imports : [IgxSwitchComponent, FormsModule, IgxIconComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardContentDirective]
})
export class OverlayScrollSample1Component implements OnDestroy {
@ViewChild ('modalDemo' , { static : true })
public modalDemo: ElementRef;
@ViewChild ('overlayDemo' , { static : true })
public overlayDemo: ElementRef;
@ViewChild ('mainContainer' , { static : true })
public mainContainer: ElementRef;
public modalValue = true ;
private _defaultPositionSettings: PositionSettings = {
horizontalDirection : HorizontalAlignment.Center,
horizontalStartPoint : HorizontalAlignment.Center,
verticalDirection : VerticalAlignment.Middle,
verticalStartPoint : VerticalAlignment.Middle
};
private _overlaySettings: OverlaySettings = {
positionStrategy : new GlobalPositionStrategy(),
scrollStrategy : new AbsoluteScrollStrategy(),
modal : true ,
closeOnOutsideClick : true
};
private _overlayId: string ;
constructor (@Inject (IgxOverlayService) private overlay: IgxOverlayService ) { }
public onClickModal (event: Event, strategy: string ) {
event.stopPropagation();
const positionSettings = Object .assign(Object .assign({}, this ._defaultPositionSettings), {
horizontalDirection : HorizontalAlignment.Right,
horizontalStartPoint : HorizontalAlignment.Right,
verticalDirection : VerticalAlignment.Bottom,
verticalStartPoint : VerticalAlignment.Bottom
});
let positionStrategy;
switch (strategy) {
case ('auto' ):
positionStrategy = new AutoPositionStrategy(positionSettings);
break ;
case ('elastic' ):
positionStrategy = new ElasticPositionStrategy(positionSettings);
break ;
case ('connected' ):
positionStrategy = new ConnectedPositioningStrategy(positionSettings);
break ;
default :
positionStrategy = new GlobalPositionStrategy(Object .assign(positionSettings, {
horizontalDirection : HorizontalAlignment.Center,
verticalDirection : VerticalAlignment.Middle
}));
}
const showSettings = Object .assign(Object .assign({}, this ._overlaySettings), {
target : this .modalDemo.nativeElement,
modal : this .modalValue,
positionStrategy
});
if (this ._overlayId) {
this .overlay.detach(this ._overlayId);
delete this ._overlayId;
}
this ._overlayId = this .overlay.attach(this .overlayDemo, showSettings);
this .overlay.show(this ._overlayId, showSettings);
}
public ngOnDestroy(): void {
if (this ._overlayId) {
this .overlay.detach(this ._overlayId);
delete this ._overlayId;
}
}
}
ts コピー <div class ='overlay-sample' #mainContainer >
<div class ='container' >
<div class ="container__row" >
<igx-switch [(ngModel )]='modalValue' >
Modal
</igx-switch >
<div class ='section__row--wide' >
<div class ="section__container--wide" #modalDemo >
<span (click )="onClickModal($event, 'auto')" >
<igx-icon > notifications</igx-icon >
<p > Auto</p >
</span >
<span (click )="onClickModal($event, 'elastic')" >
<igx-icon > notifications</igx-icon >
<p > Elastic</p >
</span >
<span (click )="onClickModal($event, 'connected')" >
<igx-icon > notifications</igx-icon >
<p > Connect</p >
</span >
<span (click )="onClickModal($event, 'global')" >
<igx-icon > notifications</igx-icon >
<p > Global</p >
</span >
</div >
</div >
</div >
</div >
<div class ='container' >
<div class ="overlay__element" #overlayDemo >
<igx-card elevated >
<igx-card-header >
<h3 class ="igx-card-header__title" > Overlay</h3 >
</igx-card-header >
<igx-card-content >
<p class ="igx-card-content__text" > Click on the positioning settings to dynamically re-attach this
element.</p >
</igx-card-content >
</igx-card >
</div >
</div >
</div >
html コピー .overlay-sample {
padding : 32px 0px 32px 32px ;
overflow-y : scroll;
display : flex;
flex-direction : row;
height : 1600px ;
margin-bottom : 500px ;
}
.container__row > div , .section__container--wide > span , .section__position-element > div {
display : inline-block;
}
.section__row--wide , .container__row , .section__header {
width : 100% ;
}
.section__row > span {
height : 48px ;
}
.section__row--wide , .section__container--wide > span {
height : 80px ;
max-width : 320px ;
}
span :hover {
border : 1px solid #e41c77 ;
box-sizing : border-box;
cursor : pointer;
}
.section__container--wide {
align-content : flex-start;
display : flex;
}
.section__container--wide > span {
text-align : center;
vertical-align : middle;
line-height : 12px ;
font-weight : 500 ;
width : 80px ;
padding-top : 16px ;
p {
margin-top : 0px ;
}
}
.section__position-element , .section__position-header {
width : 144px ;
text-align : center;
}
.section__separator {
width : 32px ;
}
.container {
width : 50% ;
display : flex;
flex-direction : column;
align-items : center;
}
.overlay__element {
width : 288px ;
height : 144px ;
}
.section__header {
max-height : 96px ;
text-align : left;
font-weight : 700 ;
font-size : 16px ;
}
.container__row {
height : 100% ;
text-align : left;
margin-top : 16px ;
}
.section__position-element , .section__row--wide {
box-shadow : 0 1px 3px 0 rgba(0 , 0 , 0 , 0.2 ), 0 1px 1px 0 rgba(0 , 0 , 0 , 0.14 ), 0 2px 1px -1px rgba(0 , 0 , 0 , 0.12 );
}
.igx-switch {
padding : 16px ;
}
scss コピー
Referencias de API
Recursos adicionales