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.

    Ejemplo de interruptor Angular

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Primeros pasos con 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
    cmd

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

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

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

    Usando el interruptor Angular

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

    Cambiar propiedades

    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}
    ];
    typescript

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

    Añade algunos estilos:

    :host {
      display: flex;
      flex-flow: column nowrap;
      padding: 16px;
    }
    
    igx-switch {
      margin-top: 24px;
    }
    scss

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Posicionamiento de etiquetas

    Puede colocar la etiqueta usando la propiedad labelPosition del interruptor:

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

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

    Estilo

    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';
    scss

    Luego, creamos un nuevo tema que extiende el switch-theme y usamos algunos de sus parámetros para diseñar los elementos del cambio:

    $custom-switch-theme: switch-theme(
      $thumb-on-color: #ecaa53,
      $track-on-color: #f0cb9c,
    );
    scss

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

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

    Manifestación

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    App Builder | Banner de llamada a la acción

    Referencias de API

    Dependencias temáticas

    Recursos adicionales

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