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 o IgxToggleModule no seu arquivo 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 {}
Como alternativa, a partir da 16.0.0 você pode importar o IgxToggleDirective como uma dependência autônoma.
// 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 {}
Agora que você importou o módulo ou a diretiva Ignite UI for Angular Toggle, você pode começar a usar a diretiva igxToggle.
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'
// 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 alternável:
<!--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.
A diretiva igxToggle usa o provedor IgxOverlayService. Os métodos open, close e toggle aceitam configurações de sobreposição opcionais que controlam como o conteúdo é exibido. Se omitido, as configurações de sobreposição padrão são usadas como visto no exemplo anterior.
Note
Por padrão, a propriedade closeOnOutsideClick é definida como true. Para desabilitar essa funcionalidade, a propriedade precisa ser definida como false. Além disso, a propriedade closeOnEscape é definida como false, então, para usá-la, precisamos defini-la como 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);
}
É assim que nossa alternância deve ficar agora:
Automatic Toggle Actions
Para evitar o uso dos métodos open e close, podemos usar uma diretiva, que tem um manipulador onClick, e altera automaticamente o estado do toggle ao qual estamos nos referindo.
Se quisermos aproveitar essa funcionalidade, teremos que usar o IgxToggleActionDirective do IgxToggleModule e atribuir o IgxToggleDirective a ele.
Note
A IgxToggleActionDirective deve ser declarada no elemento que estamos planejando 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ão, IgxToggleActionDirective exclui seu elemento host da propriedade closeOnOutsideClick. Portanto, clicar no elemento host não disparará nenhum evento. Além disso, essa diretiva definirá seu elemento host como o target das configurações de sobreposição.
Automatic Toggle Service Provider
Há uma maneira conveniente de manter o estado da diretiva igxToggle e comandá-la por meio do provedor igxNavigationService. Precisamos apenas definir um identificador para nosso elemento igxToggle, que será usado para registrar o toggle com o serviço. Se quisermos controlar seu estado automaticamente, temos que passar esse identificador para o 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>
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. O método setOffset também suporta um parâmetro offsetMode opcional que determina se deve adicionar aos valores de deslocamento atuais 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
Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:
Theming Dependencies
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub