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 Exemplo de switch

    Introdução ao 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.

    Usando o 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>

    Propriedades do switch

    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:

    


  {{ setting.name }}

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

    Posicionamento da etiqueta

    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 fornecendo apenas dois parâmetros -$thumb-off-color e $thumb-on-color você pode obter uma opção totalmente estilizada, pois o tema gera todo o resto das cores necessárias com base nessas duas, é claro que você pode substituir qualquer um dos outros parâmetros para uma aparência personalizada:

    $custom-switch-theme: switch-theme( $thumb-off-color: #7cadd5, $thumb-on-color: #ecaa53, );

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

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

    Demo

    Referências de API

    Theming Dependencies

    Recursos adicionais

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.