Descripción general de la directiva de ondulación Angular
El componente Ignite UI for Angular Ripple crea una animación en respuesta a un toque o un clic del mouse.
Ejemplo de ondulación 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.
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Primeros pasos con Ignite UI for Angular Ripple
Para comenzar con la directiva Ignite UI for Angular Ripple, 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 IgxRippleModule
en el archivo app.module.ts.
// app.module.ts
import { IgxRippleModule } from 'igniteui-angular';
// import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxRippleModule,
...
]
})
export class AppModule {}
typescript
Alternativamente, a partir de 16.0.0
puede importar IgxRippleDirective
como dependencias independientes.
// home.component.ts
import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IgxRippleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<button igxButton="contained" igxRipple>Click Me</button>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxRippleDirective, IgxButtonDirective],
})
export class HomeComponent {}
typescript
Ahora que tiene importada la directiva o el módulo Ignite UI for Angular Ripple, puede comenzar a usar la directiva igxRipple
.
igxRipple
utiliza la API de animación web y se ejecuta de forma nativa en navegadores que la admiten. El polyfill web-animations.min.js
está disponible para otros navegadores.
Usando la directiva de ondulación Angular
Agregar efecto dominó
Utilice la directiva igxRipple
para agregar un efecto dominó al elemento especificado:
<button igxButton="contained" igxRipple>Click Me</button>
html
Ejemplos
Color personalizado
Puedes cambiar fácilmente el color de ondulación predeterminado usando igxRipple
:
<button igxButton="contained" igxRipple="white">White</button>
html
Efecto dominó centrado
De forma predeterminada, el efecto dominó comienza desde la posición del evento de clic. Puede cambiar este comportamiento usando la propiedad igxRippleCentered
y estableciendo el centro del elemento como origen.
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true">
Centered
</button>
html
Duración de la ondulación
Podemos usar la propiedad igxRippleDuration
para cambiar la duración de la animación de onda, que, de forma predeterminada, está configurada en 600 milisegundos.
<button igxButton="contained" igxRipple [igxRippleDuration]="2000">
Click Me
</button>
html
Objetivo de ondulación
Utilice la propiedad igxRippleTarget
para adjuntar un efecto dominó a un elemento específico dentro de un elemento principal.
<div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
...
<button class="sample-button child" igxButton="contained">Read More</button>
</div>
html
Tenga en cuenta que no importa si hace clic en el elemento principal o secundario, el efecto dominó solo aparecerá en el botón.
El elemento secundario al que desea apuntar con la propiedad igxRippleTarget
debe estar en una posición relativa.
Estilo
Primero, para utilizar las funciones expuestas por el motor de temas, necesitamos importar el archivo index
, donde se encuentran todas las funciones de estilo y mixins, en nuestro archivo de estilo:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
Puede crear fácilmente un nuevo tema, que extienda el ripple-theme
y acepte los parámetros necesarios para personalizar la onda como desee.
$custom-ripple-theme: ripple-theme(
$color: #383779,
);
scss
El siguiente paso es pasar el tema ondulado personalizado:
@include css-vars($custom-ripple-theme);
scss
Un conjunto de colores que utilice la igxRiple
directiva tendría prioridad sobre uno establecido por un tema personalizado.
Manifestación
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.