Visão geral da diretiva Angular Toggle

A diretiva Ignite UI for Angular Toggle permite que os usuários tornem um contêiner no DOM alternável por meio da interação do usuário.

Angular Toggle Example

Getting Started with Ignite UI for Angular Toggle

Para começar a usar a diretiva Ignite UI for Angular Toggle, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar issoIgxToggleModule no seu arquivo 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 você pode importar comoIgxToggleDirective uma dependência independente.

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

Agora que você importou o módulo ou diretiva Ignite UI for Angular Toggle, pode começar a usar aigxToggle diretiva.

Using the Angular Toggle Directive

Display Toggle

Para mostrar e ocultar o conteúdo de alternância, use seus métodos de abertura e fechamento:

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

Então, no modelo do nosso componente, podemos aplicar a diretiva no elemento que queremos que seja ativado:

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

No próximo exemplo, usaremos uma estratégia de posicionamento diferente para que o conteúdo seja exibido abaixo do botão.

AigxToggle diretiva utiliza oIgxOverlayService provedor. Osopen​close métodos etoggle aceitam configurações opcionais de sobreposição que controlam como o conteúdo é exibido. Se omitido, as configurações padrão de sobreposição são usadas como visto no exemplo anterior.

Note

Por padrão, acloseOnOutsideClick propriedade é definida comotrue. Para desabilitar essa funcionalidade, a propriedade precisa ser definida parafalse. Além disso, acloseOnEscape propriedade é padrão parafalse, então para usá-la, precisamos configurá-la paratrue.

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

É assim que nossa alternância deve ficar agora:

Automatic Toggle Actions

Para evitar usar osopen métodos e,close podemos usar uma diretiva, que possui umonClick handler, e muda automaticamente o estado do toggle ao qual estamos nos referindo.

Se quisermos aproveitar essa funcionalidade, teremos que usar oIgxToggleActionDirective from eIgxToggleModule atribuir oIgxToggleDirective to a ele.

Note

DevemIgxToggleActionDirective ser declarados no elemento que planejamos usar como um gatilho (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>

Após essas alterações, o botão deverá funcionar exatamente da mesma maneira.

Note

Por padrãoIgxToggleActionDirective, exclui seu elemento hospedeiro dacloseOnOutsideClick propriedade. Portanto, clicar no elemento host não disparará nenhum evento. Além disso, essa diretiva definirá seu elemento host como as configuraçõestarget de sobreposição.

Automatic Toggle Service Provider

Existe uma maneira conveniente de manter o estado daigxToggle diretiva e comandá-la via provedorigxNavigationService. Só precisamos definir um identificador para o nossoigxToggle elemento, que será usado para registrar o toggle com o serviço. Se quisermos controlar seu estado automaticamente, precisamos passar esse identificador para oigxToggleActionDirective.

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

Se tudo correr bem, ficará assim:

Offsetting the Toggle Container

Podemos manipular a posição do contêiner de alternância ao longo do eixo correspondente por uma quantidade fornecida. OsetOffset método também suporta um parâmetro opcionaloffsetMode que determina se deve adicionar aos valores atuais do offset ou defini-los para um 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

• IgxToggleDirectiva
• IgxToggleActionDirectiva

Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:

• Diretiva IgxOverlayOutlet
• Serviço IgxOverlay
• Serviço de Navegação igx

Theming Dependencies

• Tema IgxOverlay

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub