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
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
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
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
.
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>
html
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}
];
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í:
Label Positioning
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.
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';
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
Demo
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.