Descripción general de la directiva de alternancia Angular
La directiva Ignite UI for Angular Toggle permite a los usuarios hacer que un contenedor en el DOM se pueda alternar a través de la interacción del usuario.
Angular Toggle Example
Getting Started with Ignite UI for Angular Toggle
Para comenzar con la directiva Ignite UI for Angular Toggle, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxToggleModule en su archivo app.module.ts.
// app.module.ts
...
import { IgxToggleModule } from 'igniteui-angular';
// import { IgxToggleModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxToggleModule]
...
})
export class AppModule {}
Alternativamente, a partir de 16.0.0 puede importar IgxToggleDirective como una dependencia independiente.
// home.component.ts
import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IgxToggleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<button class="toggle-button" igxButton="contained" (click)="toggleContent()">Toggle</button>
<div class="toggle-content" igxToggle>
<section class="toggle-section">
<img src="assets/images/toggle/nature.jpg" alt="Nature" />
</section>
</div>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxToggleDirective, IgxButtonDirective]
})
export class HomeComponent {}
Ahora que tiene importada la directiva o el módulo Ignite UI for Angular Toggle, puede comenzar a usar la directiva igxToggle.
Using the Angular Toggle Directive
Display Toggle
Para mostrar y ocultar el contenido de alternancia, utilice sus métodos de apertura y cierre:
import { IgxToggleDirective } from 'igniteui-angular'
// import { IgxToggleDirective } from '@infragistics/igniteui-angular'; for licensed package
...
export class Class {
@ViewChild(IgxToggleDirective) toggle: IgxToggleDirective;
toggleContent() {
if (this.toggle.collapsed) {
this.toggle.open();
} else {
this.toggle.close();
}
}
}
Luego, en la plantilla de nuestro componente, podemos aplicar la directiva al elemento que queremos que sea alternable:
<!--template.component.html-->
<button class="toggle-button" igxButton="contained" (click)="toggleContent()">Toggle</button>
<div class="toggle-content" igxToggle>
<section class="toggle-section">
<img src="assets/images/toggle/nature.jpg"/>
</section>
</div>
Examples
Change Position
En el siguiente ejemplo, usaremos una estrategia de posicionamiento diferente para que el contenido se muestre debajo del botón.
La directiva igxToggle utiliza el proveedor IgxOverlayService. Los métodos open, close y toggle aceptan configuraciones de superposición opcionales que controlan cómo se muestra el contenido. Si se omite, se utilizan las configuraciones de superposición predeterminadas como se ve en el ejemplo anterior.
Note
De forma predeterminada, la propiedad closeOnOutsideClick está establecida en true. Para deshabilitar esta funcionalidad, la propiedad debe establecerse en false. Además, la propiedad closeOnEscape tiene el valor predeterminado false, por lo que para poder utilizarla debemos establecerla en true.
// template.component.ts
...
@ViewChild(IgxToggleDirective) public igxToggle: IgxToggleDirective;
@ViewChild('button') public igxButton: ElementRef;
public _positionSettings = {
horizontalStartPoint: HorizontalAlignment.Left,
verticalStartPoint: VerticalAlignment.Bottom
};
public _overlaySettings = {
target: this.igxButton.nativeElement,
closeOnOutsideClick: false,
closeOnEscape: true,
positionStrategy: new ConnectedPositioningStrategy(this._positionSettings)
};
public toggle() {
this.igxToggle.toggle(this._overlaySettings);
}
Así es como debería verse nuestra palanca ahora:
Automatic Toggle Actions
Para evitar el uso de los métodos open y close, podemos usar una directiva, que tiene un controlador onClick, y cambia automáticamente el estado del conmutador al que nos referimos.
Si queremos aprovechar esta funcionalidad, tendremos que usar IgxToggleActionDirective del IgxToggleModule y asignarle IgxToggleDirective.
Note
IgxToggleActionDirective debe declararse en el elemento que planeamos usar como disparador (alternar).
<!--template.component.html-->
<button class="toggle-button" igxButton="contained" [igxToggleAction]="toggleRef">Toggle</button>
<div class="toggle-content" igxToggle #toggleRef="toggle">
<section class="toggle-section">
<h6>Automatic toggle actions</h6>
</section>
</div>
Después de estos cambios, la palanca debería funcionar exactamente de la misma manera.
Note
De forma predeterminada, IgxToggleActionDirective excluye su elemento host de la propiedad closeOnOutsideClick. Por lo tanto, hacer clic en el elemento anfitrión no activará ningún evento. Además, esta directiva establecerá su elemento host como target de configuración de superposición.
Automatic Toggle Service Provider
Existe una manera conveniente de mantener el estado de la directiva igxToggle y ordenarla a través del proveedor igxNavigationService. Solo necesitamos establecer un identificador para nuestro elemento igxToggle, que se utilizará para registrar el conmutador con el servicio. Si queremos controlar su estado automáticamente, debemos pasar este identificador a igxToggleActionDirective.
<!--template.component.html-->
<button igxToggleAction="toggleId" class="toggle-button" igxButton="contained">Toggle</button>
<div igxToggle id="toggleId" class="toggle-content">
<section class="toggle-section">
<h6>Toggled by the service provider</h6>
</section>
</div>
Si todo ha ido bien, quedará así:
Offsetting the Toggle Container
Podemos manipular la posición del contenedor de alternancia a lo largo del eje correspondiente en una cantidad proporcionada. El setOffset método también admite un parámetro opcional offsetMode que determina si se deben agregar a los valores de desplazamiento actuales o establecerlos en un valor específico.
// deltaX and deltaY determine by how much the container will be offset compared to its' previous position
// Using OffsetMode.Add to add the values (default behavior)
public offsetToggleAdd() {
const deltaX = 30;
const deltaY = 30;
this.toggle.setOffset(deltaX, deltaY, OffsetMode.Add);
}
// deltaX and deltaY determine the exact position to set the container to, relative to its target element.
// Using OffsetMode.Set to set the offset to specific values
public offsetToggleSet() {
const deltaX = 30;
const deltaY = 30;
this.toggle.setOffset(deltaX, deltaY, OffsetMode.Set);
}
API References
Componentes adicionales y/o directivas con API relativas que se utilizaron:
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub