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 issoIgxSwitchModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importar comoIgxSwitchComponent uma dependência independente.

// home.component.ts

import { IgxSwitchComponent } from 'igniteui-angular/switch';
// 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ê tem o módulo ou componente do Ignite UI for Angular Switch importado, pode começar a usar oigx-switch componente.

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 do switch a alguns dados. Digamos que temos uma matriz de objetos de configuração, cada um com duas propriedades -nameestate. Você pode vincular a propriedade do componentechecked switch à propriedade de estado do objeto subjacente. Analogicamente, você pode vincular a propriedade de valor ao nome.

// 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 dolabelPosition interruptor:

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

Se olabelPosition não estiver definido, a etiqueta será posicionada após o interruptor.

Estilização

Switch Theme Property Map

Quando você modifica uma propriedade primária, todas as propriedades dependentes relacionadas são atualizadas automaticamente para refletir a alteração:

Material Fluente Bootstrap Anil

Propriedade primária	Propriedade dependente	Descrição
$track-fora da cor	$thumb-off-color	Cor do polegar quando o interruptor está desligado
	$track-desabilitado-cor	Cor da faixa quando o interruptor está desativado
$thumb-off-color	$track-fora da cor	Cor da faixa quando o interruptor está desligado
	$thumb-desabilitado-cor	Cor do polegar quando o interruptor está desativado
$track-on-color	$thumb-on-color	Cor do polegar quando o interruptor está ligado
	$track-no-pairo-colorido	Cor da faixa quando o interruptor está ligado e pairado
	$track na cor com deficiência	Cor da faixa quando o interruptor está ligado e desativado
$thumb-on-color	$track-on-color	Cor da faixa quando o interruptor está ligado
	$thumb-em-cor-desabilitado	Cor do polegar quando o interruptor está ligado e desativado

Propriedade primária	Propriedade dependente	Descrição
$thumb-off-color	$border cor	Cor da borda derivada da cor do polegar fora
	$thumb-deslocado-de-hover-cor	Cor do polegar no hover
$border cor	$thumb-off-color	Cor de polegar fora derivada da cor da borda
	$border-hover-color	Cor da borda no hover
	$border-desabilitado-cor	Cor da borda quando desativada
$track-fora da cor	$thumb-off-color	Cor do thumb off derivada da cor off da faixa
	$border-hover-color	Cor da borda no hover
	$track-desabilitado-cor	Cor da trilha quando desativada
$track-on-color	$thumb-on-color	Cor do polegar quando o interruptor está ligado
	$thumb-em-cor-desabilitado	A cor do polegar quando o interruptor está ligado e desativado
	$border-on-color	A cor da borda quando o interruptor está ligado
	$border-no-hover-color	Cor da borda quando o interruptor está ligado e com o mouse
	$track-no-pairo-colorido	Cor da faixa quando o interruptor está ligado e pairado
	$track na cor com deficiência	Cor da faixa quando ligada e desativada

Propriedade primária	Propriedade dependente	Descrição
$thumb-off-color	$border cor	Cor da borda derivada da cor do polegar fora
	$thumb-deslocado-de-hover-cor	Cor do polegar no hover
$border cor	$thumb-off-color	Cor de polegar fora derivada da cor da borda
	$border-hover-color	Cor da borda no hover
	$border-desabilitado-cor	Cor da borda quando desativada
$track-fora da cor	$thumb-off-color	Cor do thumb off derivada da cor off da faixa
	$border-hover-color	Cor da borda no hover
	$track-desabilitado-cor	Cor da trilha quando desativada
$track-on-color	$thumb-on-color	Cor do polegar quando o interruptor está ligado
	$thumb-em-cor-desabilitado	A cor do polegar quando o interruptor está ligado e desativado
	$border-on-color	A cor da borda quando o interruptor está ligado
	$border-no-hover-color	Cor da borda quando o interruptor está ligado e com o mouse
	$track-no-pairo-colorido	Cor da faixa quando o interruptor está ligado e pairado
	$track na cor com deficiência	Cor da faixa quando ligada e desativada
	$focus-preenchido-cor	Cor de preenchimento quando o interruptor está focado
$focus-preenchido-cor	$focus-contorno-cor	Cor do contorno derivada do preenchimento de foco
	$focus-preenchimento-cor flutuante	Focar na cor de preenchimento ao passar o rato

Propriedade primária	Propriedade dependente	Descrição
$thumb-off-color	$border cor	Cor da borda derivada da cor do polegar fora
	$thumb-deslocado-de-hover-cor	Cor do polegar no hover
$border cor	$thumb-off-color	Cor de polegar fora derivada da cor da borda
	$border-hover-color	Cor da borda no hover
	$border-desabilitado-cor	Cor da borda quando desativada
$track-fora da cor	$thumb-off-color	Cor do thumb off derivada da cor off da faixa
	$border-hover-color	Cor da borda no hover
	$track-desabilitado-cor	Cor da trilha quando desativada
$track-on-color	$thumb-on-color	Cor do polegar quando o interruptor está ligado
	$thumb-em-cor-desabilitado	A cor do polegar quando o interruptor está ligado e desativado
	$border-on-color	A cor da borda quando o interruptor está ligado
	$track-no-pairo-colorido	Cor da faixa quando o interruptor está ligado e pairado
	$track na cor com deficiência	Cor da faixa quando ligada e desativada
$border-on-color	$border-no-hover-color	Cor da borda quando o interruptor está ligado e com o mouse
	$focus-focada em cores delineadas	A cor delineada de foco para o estado focado

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

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

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

Depois, criamos um novo tema que estende oswitch-theme e, fornecendo apenas dois parâmetros —$thumb-off-colore$thumb-on-color você pode obter um switch totalmente estilizado, já que o tema gera todas as outras cores necessárias com base nessas duas, você pode, claro, sobrescrever qualquer um dos outros parâmetros para um visual personalizado:

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

Por fim, inclua o tema personalizado em seu aplicativo:

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

No exemplo abaixo, você pode ver como usar o componente switch com variáveis CSS personalizadas permite criar um design que visualmente se assemelha ao switch usado noSAP UI5 sistema de projeto.

Styling with Tailwind

Você pode estilizar o interruptor usando nossas classes utilitárias personalizadas Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-switch,dark-switch.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no Tema IgxSwitch. A sintaxe é a seguinte:

<igx-switch
  class="!light-switch ![--thumb-on-color:#FF4E00]"
  [checked]="true">
  ...
</igx-switch>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, seu interruptor deve ficar assim:

API References

Theming Dependencies

Tema IgxRipple

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.