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
¿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í:
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
Referencias de API
Dependencias temáticas
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.