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

EXAMPLE

TS

HTML

SCSS

import { Component, ViewChild } from '@angular/core';
import { IgxToggleDirective, IgxButtonDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toggle-sample-1',
    styleUrls: ['./toggle-sample-1.component.scss', '../toggle-samples.scss'],
    templateUrl: './toggle-sample-1.component.html',
    imports: [IgxButtonDirective, IgxToggleDirective]
})
export class ToggleSample1Component {

  @ViewChild(IgxToggleDirective, { static: true })
  public toggle: IgxToggleDirective;

  public toggleContent() {
    if (this.toggle.collapsed) {
      this.toggle.open();
    } else {
      this.toggle.close();
    }
  }
}
tsコピー

<div class="sample-column">
    <button class="toggle-button" igxButton="contained" (click)="toggleContent()">Toggle</button>
    <div class="toggle-content" igxToggle>
        <section class="toggle-section">
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/toggle/nature.jpg"/>
        </section>
    </div>
</div>
htmlコピー

.toggle-section{
    background-color: white;
}
scssコピー

Edit in: CodesandboxStackBlitz

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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
cmd

Para obtener una introducción completa al 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 {}
typescript

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 {}
typescript

Ahora que tiene el módulo o directiva Ignite UI for Angular Toggle importado, puede comenzar a usar la igxToggle 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'
// 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();
        }
    }
}
typescript

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

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.

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);
    }
typescript

Así es como debería verse nuestra palanca ahora:

EXAMPLE

TS

HTML

import { Component, ElementRef, ViewChild } from '@angular/core';

import { ConnectedPositioningStrategy, HorizontalAlignment, IgxToggleDirective, VerticalAlignment, OverlaySettings, IgxButtonDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toggle',
    styleUrls: ['./toggle-samples.scss'],
    templateUrl: './toggle.component.html',
    imports: [IgxButtonDirective, IgxToggleDirective]
})
export class ToggleComponent {
    @ViewChild(IgxToggleDirective, { static: true }) public igxToggle: IgxToggleDirective;
    @ViewChild('button', { static: true }) public igxButton: ElementRef;

    public _positionSettings = {
        horizontalStartPoint: HorizontalAlignment.Left,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: false,
        modal: false,
        closeOnEscape: true,
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings)
    };

    public toggle() {
        this._overlaySettings.target = this.igxButton.nativeElement;
        this.igxToggle.toggle(this._overlaySettings);
    }
}
tsコピー

<div class="sample-column">
    <button class="toggle-button" #button igxButton="contained" (click)="toggle()">Toggle</button>
    <div class="toggle-content" igxToggle>
        <section class="toggle-section">
            <img src="https://www.infragistics.com/angular-demos-lob/assets/images/toggle/nature.jpg"/>
        </section>
    </div>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

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.

​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>
html

Después de estos cambios, la palanca debería funcionar exactamente de la misma manera.

EXAMPLE

TS

HTML

import { Component } from '@angular/core';
import { IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toggle-sample-2',
    styleUrls: ['../toggle-samples.scss'],
    templateUrl: './toggle-sample-2.component.html',
    imports: [IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective]
})
export class ToggleSample2Component { }
tsコピー

<div class="sample-column">
    <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>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

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

Si todo ha ido bien, quedará así:

EXAMPLE

TS

HTML

import { Component } from '@angular/core';
import { IgxToggleActionDirective, IgxButtonDirective, IgxToggleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toggle-sample-3',
    styleUrls: ['../toggle-samples.scss'],
    templateUrl: './toggle-sample-3.component.html',
    imports: [IgxToggleActionDirective, IgxButtonDirective, IgxToggleDirective]
})
export class ToggleSample3Component { }
tsコピー

<div class="sample-column">
    <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>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

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);
}
typescript

// 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);
}
typescript

EXAMPLE

TS

HTML

import { Component, ViewChild } from '@angular/core';
import { IgxToggleDirective, IgxButtonDirective, IgxToggleActionDirective } from 'igniteui-angular';

@Component({
    selector: 'app-toggle-sample-4',
    styleUrls: ['../toggle-samples.scss'],
    templateUrl: './toggle-sample-4.component.html',
    imports: [IgxButtonDirective, IgxToggleActionDirective, IgxToggleDirective]
})
export class ToggleSample4Component {
    @ViewChild(IgxToggleDirective, { static: true }) public toggle: IgxToggleDirective;

    public offsetToggle() {
        const deltaX = 30;
        const deltaY = 30;
        this.toggle.setOffset(deltaX, deltaY);
    }
}
tsコピー

<div class="sample-column">
    <button class="toggle-button" igxButton="contained" [igxToggleAction]="toggleRef" (click)="offsetToggle()">Toggle</button>
    <div class="toggle-content" igxToggle #toggleRef="toggle">
        <section class="toggle-section">
            <h6>Offsetting the toggle container</h6>
        </section>
    </div>
</div>
htmlコピー

Edit in: CodesandboxStackBlitz

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