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 de utilizar Ripple en Angular
Verifique el resultado.
Detalles del Ripple
- 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.