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

Now that you have the Ignite UI for Angular Switch module or component imported, you can start using the igx-switch component.

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

Let's enhance the code above by binding the switch properties to some data. Say, we have an array of settings objects, each having two properties - name and state. You can bind the switch component checked property to the underlying object state property. Analogically, you can bind the value property to name.

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

You can position the label using the switch's labelPosition property:

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

If the labelPosition is not set, the label will be positioned after the switch.

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

To get started with styling the switch, we need to import the index file, where all the theme functions and component mixins live:

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

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

Then, we create a new theme that extends the switch-theme and by providing just two parameters - $thumb-off-color and $thumb-on-color you can get a fully styled switch, as the theme generates all the rest of the necessary colors based on these two, you can of course override any of the other parameters for a customized look:

$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);

In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the SAP UI5 design system.

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.