Material angular 7 – Ondas

La <mat-ripple> Directiva Angular se utiliza para definir un área que representa la interacción del usuario.

En este capítulo, mostraremos la configuración necesaria para dibujar un efecto dominó utilizando Material Angular.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatRippleModule, MatCheckboxModule, MatInputModule}de@angular/materialimport{FormsModule, ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatRippleModule,MatCheckboxModule,MatInputModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

)

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

notranslate prettyprinted">
 [(ngModel)] ="centrado [(ngModel)] ="desactivado">Desactivado [(ngModel)] ="sin límite">Unbound>matInput [(ngModel)] ="radio "type="number "placeholder="Radius">>matInput [(ngModel)] ="color "type="text "placeholder="Color">".
   [matRippleCentered] ="centrado"
   [matRippleDisabled] ="desactivado"
   [matRippleUnbounded] ="sin límites"
   [matRippleRadius] ="radio"
   [matRippleColor] ="color">
   Haga clic en mí

A continuación se muestra el contenido del archivo CSS modificado app.component.css .

.tp-ripple-container {
   cursor: puntero;
   text-align: centro;
   ancho:300px;
   altura:300px;
   altura de línea: 300px;
   user-select: none;-webkit-user-select: none;-moz-user-select: none;-webkit-user-drag: none;-webkit-usuario-select: none;-webkit-tap-highlight-color: transparent;}.tp-ripple-checkbox {
   margen:6px12px6px0;}.tp-ripple-form-field {
   margen:012px00;}

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

importar{Componente}desde@angular/core;@Componente({ { {Componente
   selector:app-root,
   templateUrl:./app.component.html,
   styleUrls:[./app.component.css]})exportclassAppComponent{Componente
   title =materialApp;
   centrado =falso;
   disabled =falso;
   sin límites =falso;
   radio: número;
   color:cadena;}

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado casillas de verificación usando mat-checkbox y las hemos enlazado usando ngModel con variables. Estas propiedades se utilizarán para personalizar la ondulación.
  • Luego, hemos creado la onda y hemos mostrado sus diversos atributos ligados a variables en el archivo.ts.