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.