Descripción general de los componentes del interruptor Angular

    El componente Ignite UI for Angular Switch es un componente de selección de opciones binarias que se comporta de manera similar al componente switch en 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 a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxSwitchModule en su archivo 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 {}

    Alternativamente, a partir de 16.0.0 puede importar IgxSwitchComponent como una dependencia independiente.

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

    Ahora que ha importado el módulo o componente Ignite UI for Angular Switch, puede comenzar a usar el componente igx-switch.

    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

    Mejoremos el código anterior vinculando las propiedades del interruptor a algunos datos. Digamos que tenemos una serie de objetos de configuración, cada uno con dos propiedades: name y state. Puede vincular la propiedad checked del componente de conmutación a la propiedad de estado del objeto subyacente. De manera análoga, puede vincular la propiedad del 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

    Puede colocar la etiqueta usando la propiedad labelPosition del interruptor:

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

    Si no se establece labelPosition, la etiqueta se colocará después del cambio.

    Estilismo

    Para comenzar a diseñar el interruptor, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @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 extiende el switch-theme y usamos algunos de sus parámetros para diseñar los elementos del cambio:

    // in styles.scss
$custom-switch-theme: switch-theme(
    $thumb-on-color: #ECAA53,
    $track-on-color: #F0CB9C
);

    Including Themes

    El último paso es incluir el tema del componente en nuestra aplicación.

    Si $legacy-support está configurado en true, incluya el tema del componente así:

     @include switch($custom-switch-theme);
    Note

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

    :host {
    ::ng-deep {
        @include switch($custom-switch-theme);
    }
}

    Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

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

    Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

    :host {
    @include css-vars($custom-switch-theme);
}

    Demo

    API References

    Theming Dependencies

    Additional Resources

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