Angular Descripción general de la directiva de alternancia

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 al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxToggleModule en tu archivo app.module.ts.

// app.module.ts

...
import { IgxToggleModule } from 'igniteui-angular/directives';
// import { IgxToggleModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxToggleModule]
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxToggleDirective como una dependencia independiente.

// home.component.ts

import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular/directives';

// 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 tienes importado el módulo o directiva Ignite UI for Angular Toggle, puedes empezar a usar laigxToggle directiva.

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/directives'
// 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 sobre el 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.

LaigxToggle directiva utiliza elIgxOverlayService proveedor. Losopen​close métodos ytoggle aceptan configuraciones opcionales de superposición que controlan cómo se muestra el contenido. Si se omiten, se usan los ajustes predeterminados de superposición como se ha visto en la muestra anterior.

Note

Por defecto, lacloseOnOutsideClick propiedad está configurada comotrue. Para desactivar esta funcionalidad, la propiedad debe configurarse enfalse. Además, lacloseOnEscape propiedad está predeterminada enfalse, así que para poder usarla, tenemos que configurarla comotrue.

// 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 usar losopen métodos yclose, podemos usar una directiva, que tiene unonClick manejador, y cambia automáticamente el estado del toggle al que nos referimos.

Si queremos aprovechar esta funcionalidad, tendremos que usar elIgxToggleActionDirective from yIgxToggleModule asignarle elIgxToggleDirective.

Note

DebenIgxToggleActionDirective declararse sobre el elemento que planeamos usar como un disparador (toggle).

<!--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

Por defectoIgxToggleActionDirective, excluye a su elemento anfitrión de lacloseOnOutsideClick propiedad. Por lo tanto, hacer clic en el elemento anfitrión no se activará ningún evento. Además, esta directiva establecerá su elemento anfitrión como configuracióntarget de superposición.

Automatic Toggle Service Provider

Hay una forma cómoda de mantener el estado de laigxToggle directiva y ordenarla a través deligxNavigationService proveedor. Solo necesitamos establecer un identificador para nuestroigxToggle elemento, que se usará para registrar el toggle con el servicio. Si queremos controlar su estado automáticamente, tenemos que pasar este identificador a laigxToggleActionDirective.

<!--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 toggle a lo largo del eje correspondiente en una cantidad proporcionada. ElsetOffset método también soporta un parámetro opcionaloffsetMode que determina si añadir a los valores actuales del desplazamiento o fijarlos 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

• DirectivaAlternarIgx
• IgxToggleActionDirectiva

Componentes adicionales y/o directivas con API relativas que se utilizaron:

• IgxOverlayOutletDirectiva
• Servicio IgxOverlay
• igxNavigationService

Theming Dependencies

• Tema IgxOverlay

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub