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

    EXAMPLE

    ¿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

    EXAMPLE

    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

    EXAMPLE

    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

    EXAMPLE

    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.

    EXAMPLE

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

    App Builder | Banner de llamada a la acción

    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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Referencias de API

    Recursos adicionales

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