Visão geral do componente de comutação Angular

    O componente Ignite UI for Angular Switch é um componente de seleção de escolha binária que se comporta de forma semelhante ao componente Switch no iOS.

    Angular Switch Example

    Getting Started with Ignite UI for Angular Switch

    Para começar a usar o componente Ignite UI for Angular Switch, 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 IgxSwitchModule no seu arquivo app.module.ts.

    // app.module.ts

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

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

    Como alternativa, a partir da 16.0.0 você pode importar o IgxSwitchComponent como uma dependência autônoma.

    // home.component.ts

import { IgxSwitchComponent } from 'igniteui-angular';
// import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: ` <igx-switch [checked]="true"> Simple switch </igx-switch> `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxSwitchComponent],
})
export class HomeComponent {}

    Agora que você importou o módulo ou componente Ignite UI for Angular Switch, você pode começar a usar o componente igx-switch.

    Using the Angular Switch

    Em seu núcleo, o componente switch permite alternar entre estado ligado/desligado. O estilo padrão é feito de acordo com a especificação de controles de seleção nas diretrizes do Material Design.

    Para obter um switch simples como o da demonstração, adicione o seguinte código dentro do modelo do componente:

    <igx-switch [checked]="true"> Simple switch </igx-switch>

    Switch properties

    Vamos aprimorar o código acima vinculando as propriedades switch a alguns dados. Digamos que temos uma matriz de objetos settings, cada um com duas propriedades -name e state. Você pode vincular a propriedade checked do componente switch à propriedade state do objeto subjacente. Analogicamente, você pode vincular a propriedade value ao name.

    // toggle.component.ts
...
public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
];

    Melhore o modelo do componente adicionando uma opção para cada configuração e, em seguida, vinculando a propriedade correspondente:

    <!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  {{ setting.name }}
</igx-switch>

    Adicione alguns estilos:

    :host {
  display: flex;
  flex-flow: column nowrap;
  padding: 16px;
}

igx-switch {
  margin-top: 24px;
}

    E o resultado final deve ser algo assim:

    Label Positioning

    Você pode posicionar o rótulo usando a propriedade labelPosition do switch:

    <igx-switch labelPosition="before"></igx-switch>

    Se labelPosition não estiver definido, o rótulo será posicionado após o switch.

    Estilização

    Para começar a estilizar o switch, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Em seguida, criamos um novo tema que estende o switch-theme e usamos alguns de seus parâmetros para estilizar os itens do switch:

    $custom-switch-theme: switch-theme(
  $thumb-on-color: #ecaa53,
  $track-on-color: #f0cb9c,
);

    O último passo é incluir o tema do componente em nosso aplicativo.

    @include css-vars($custom-switch-theme);

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.