Descripción general de los componentes del conmutador Angular

El componente Ignite UI for Angular Switch es un componente de selección de elección binaria que se comporta de forma similar al componente switch de iOS.

Angular Switch Example

Getting Started with Ignite UI for Angular Switch

Para comenzar con el componente Ignite UI for Angular Switch, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxSwitchModule en tu archivo 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 puedes importarlosIgxSwitchComponent como una dependencia independiente.

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

Ahora que tienes importado el módulo o componente Ignite UI for Angular Switch, puedes empezar a usar eligx-switch componente.

Using the Angular Switch

En esencia, el componente del interruptor permite alternar entre el estado de encendido y apagado. El estilo predeterminado se realiza de acuerdo con la especificación de controles de selección en las pautas de Material Design.

Para obtener un cambio simple como el de la demostración, agregue el siguiente código dentro de la plantilla del componente:

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

Switch properties

Vamos a mejorar el código anterior vinculando las propiedades del switch a algunos datos. Supongamos que tenemos una matriz de objetos de configuración, cada uno con dos propiedades -nameystate. Puedes vincular la propiedad de componentechecked switch a la propiedad de estado del objeto subyacente. De forma análoga, puedes vincular la propiedad de valor al nombre.

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

Mejore la plantilla del componente agregando un modificador para cada configuración y luego vinculando la propiedad correspondiente:

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

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

Añade algunos estilos:

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

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

Y el resultado final debería ser algo así:

Label Positioning

Puedes posicionar la etiqueta usando la propiedad dellabelPosition interruptor:

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

Si no estálabelPosition ajustado, la etiqueta se colocará después del interruptor.

Estilismo

Switch Theme Property Map

Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

Material Fluido Bootstrap Añil

Propiedad principal	Propiedad dependiente	Descripción
$track-off-color	$thumb-off-color	Color del pulgar cuando el interruptor está apagado
	$track-desactivado-color	Color de pista cuando el interruptor está desactivado
$thumb-off-color	$track-off-color	Color de pista cuando el interruptor está apagado
	$thumb-desactivado-color	Color del pulgar cuando el interruptor está desactivado
$track-on-color	$thumb-on-color	Color del pulgar cuando el interruptor está encendido
	$track en color flotante	Color de pista cuando el interruptor está encendido y flotado
	$track sobre color para desactivados	Color de pista cuando el interruptor está encendido y desactivado
$thumb-on-color	$track-on-color	Color de pista cuando el interruptor está encendido
	$thumb en color desactivado	Color del pulgar cuando el interruptor está encendido y desactivado

Propiedad principal	Propiedad dependiente	Descripción
$thumb-off-color	$border color	Color de borde derivado del color de pulgar apagado
	$thumb-off-hover-color	Color del pulgar en el vuelo flotante
$border color	$thumb-off-color	Color de pulgar fuera derivado del color del borde
	$border-hover-color	Color del borde en el hover
	$border-desactivado-color	Color del borde cuando está desactivado
$track-off-color	$thumb-off-color	Color de pulgar apagado derivado del color de pista apagado
	$border-hover-color	Color del borde en el hover
	$track-desactivado-color	Color de pista cuando está desactivado
$track-on-color	$thumb-on-color	Color del pulgar cuando el interruptor está encendido
	$thumb en color desactivado	El color del pulgar cuando el interruptor está encendido y desactivado
	$border sobre color	El color del borde cuando el interruptor está encendido
	$border en color flotante	Color del borde cuando el interruptor está encendido y se mantiene en el cursor
	$track en color flotante	Color de pista cuando el interruptor está encendido y flotado
	$track sobre color para desactivados	Color de pista cuando está activado y desactivado

Propiedad principal	Propiedad dependiente	Descripción
$thumb-off-color	$border color	Color de borde derivado del color de pulgar apagado
	$thumb-off-hover-color	Color del pulgar en el vuelo flotante
$border color	$thumb-off-color	Color de pulgar fuera derivado del color del borde
	$border-hover-color	Color del borde en el hover
	$border-desactivado-color	Color del borde cuando está desactivado
$track-off-color	$thumb-off-color	Color de pulgar apagado derivado del color de pista apagado
	$border-hover-color	Color del borde en el hover
	$track-desactivado-color	Color de pista cuando está desactivado
$track-on-color	$thumb-on-color	Color del pulgar cuando el interruptor está encendido
	$thumb en color desactivado	El color del pulgar cuando el interruptor está encendido y desactivado
	$border sobre color	El color del borde cuando el interruptor está encendido
	$border en color flotante	Color del borde cuando el interruptor está encendido y se mantiene en el cursor
	$track en color flotante	Color de pista cuando el interruptor está encendido y flotado
	$track sobre color para desactivados	Color de pista cuando está activado y desactivado
	$focus-relleno-color	Rellena el color cuando el interruptor está enfocado
$focus-relleno-color	$focus-contorno-color	Color de contorno derivado del relleno de enfoque
	$focus-llenar-flotar-color-	Enfoca el color de relleno cuando se mantiene el cursor

Propiedad principal	Propiedad dependiente	Descripción
$thumb-off-color	$border color	Color de borde derivado del color de pulgar apagado
	$thumb-off-hover-color	Color del pulgar en el vuelo flotante
$border color	$thumb-off-color	Color de pulgar fuera derivado del color del borde
	$border-hover-color	Color del borde en el hover
	$border-desactivado-color	Color del borde cuando está desactivado
$track-off-color	$thumb-off-color	Color de pulgar apagado derivado del color de pista apagado
	$border-hover-color	Color del borde en el hover
	$track-desactivado-color	Color de pista cuando está desactivado
$track-on-color	$thumb-on-color	Color del pulgar cuando el interruptor está encendido
	$thumb en color desactivado	El color del pulgar cuando el interruptor está encendido y desactivado
	$border sobre color	El color del borde cuando el interruptor está encendido
	$track en color flotante	Color de pista cuando el interruptor está encendido y flotado
	$track sobre color para desactivados	Color de pista cuando está activado y desactivado
$border sobre color	$border en color flotante	Color del borde cuando el interruptor está encendido y se mantiene en el cursor
	$focus enfoque en el contorno del color	El color delineado de foco para el estado de enfoque

Para empezar a estilizar el switch, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mixin:

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

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

Luego, creamos un nuevo tema que extienda elswitch-theme y proporcionando solo dos parámetros —$thumb-off-colory$thumb-on-color puedes obtener un interruptor completamente estilizado, ya que el tema genera todos los demás colores necesarios basándose en estos dos, por supuesto puedes anular cualquiera de los otros parámetros para un aspecto personalizado:

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

Finalmente, incluya el tema personalizado en su aplicación:

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

En el ejemplo siguiente, puedes ver cómo usar el componente switch con variables CSS personalizadas te permite crear un diseño que visualmente se asemeja al switch usado en elSAP UI5 sistema de diseño.

Styling with Tailwind

Puedes diseñar el interruptor usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

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

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-switch,dark-switch.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el Tema IgxSwitch. La sintaxis es la siguiente:

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

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tu interruptor debería verse así:

API References

Theming Dependencies

Tema IgxRipple

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.