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.

    Angular Ripple Example

    ¿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.

    Getting Started with Ignite UI for Angular Ripple Directive

    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

    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 {}

    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 {}

    Ahora que tiene importada la directiva o el módulo Ignite UI for Angular Ripple, puede comenzar a usar la directiva igxRipple.

    Warning

    ​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.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    Utilice la directiva igxRipple para agregar un efecto dominó al elemento especificado:

    <button igxButton="contained" igxRipple>Click Me</button>

    Examples

    Custom Color

    Puedes cambiar fácilmente el color de ondulación predeterminado usando igxRipple:

    <button igxButton="contained" igxRipple="white">White</button>

    Centered Ripple Effect

    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>

    Ripple Duration

    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>

    Ripple Target

    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>

    Tenga en cuenta que no importa si hace clic en el elemento principal o secundario, el efecto dominó solo aparecerá en el botón.

    Note

    El elemento secundario al que desea apuntar con la propiedad igxRippleTarget debe estar en una posición relativa.

    Estilismo

    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';

    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: #217346
);

    Using CSS variables

    El siguiente paso es pasar el tema ondulado personalizado:

    @include css-vars($custom-ripple-theme);

    Using Component Theme Overrides

    Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

    Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

    :host {
    ::ng-deep {
        // Pass the custom ripple theme to the `igx-ripple` mixin
        @include ripple($custom-ripple-theme);
    }
}
    Note

    Un color que se establece mediante la directiva igxRiple tendrá prioridad sobre el establecido dentro de un tema personalizado.

    Demo

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.