Descripción general de la directiva Angular Ripple

    El componente Ignite UI for Angular Ripple crea una animación en respuesta a un toque o a un clic del ratón.

    Angular Ripple Example

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Angular completo 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 al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar elIgxRippleModule archivo en el app.module.ts.

    // app.module.ts

import { IgxRippleModule } from 'igniteui-angular/directives';
// import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxRippleModule,
        ...
    ]
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlasIgxRippleDirective como dependencias independientes.

    // home.component.ts

import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular/directives';
import { IgxButtonDirective } from 'igniteui-angular/button';
// 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 tienes importado el módulo o directiva de Ignite UI for Angular Ripple, puedes empezar a usar laigxRipple directiva.

    Warning

    UtilizaigxRipple la API de animación web y se ejecuta de forma nativa en navegadores que la soportan. Elweb-animations.min.js relleno de poliéster está disponible para otros navegadores.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    Utiliza laigxRipple directiva para añadir un efecto dominó al elemento especificado:

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

    Examples

    Custom Color

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

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

    Centered Ripple Effect

    Por defecto, el efecto dominó comienza desde la posición del evento de clic. Puedes cambiar este comportamiento usando laigxRippleCentered propiedad y estableciendo el centro del elemento como origen.

    <button igxButton="contained" igxRipple="white" [igxRippleCentered]="true">
  Centered
</button>

    Ripple Duration

    Podemos usar laigxRippleDuration propiedad para cambiar la duración de la animación de ondulación, que, por defecto, está configurada en 600 milisegundos.

    <button igxButton="contained" igxRipple [igxRippleDuration]="2000">
  Click Me
</button>

    Ripple Target

    Utiliza laigxRippleTarget propiedad para asociar un efecto dominó a un elemento específico dentro de un elemento padre.

    <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 hijo, al que quieres dirigirte con laigxRippleTarget propiedad, tiene que estar relativamente posicionado.

    Estilismo

    Primero, para usar las funciones expuestas por el motor de temas, necesitamos importar elindex archivo, donde están todas las funciones de estilo y mixins, a 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';

    Puedes crear fácilmente un tema nuevo que extienda yripple-theme acepte los parámetros necesarios para personalizar la ondulación según se desee.

    $custom-ripple-theme: ripple-theme(
  $color: #383779,
);

    El siguiente paso es pasar el tema ondulado personalizado:

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

    Un conjunto de colores que usa laigxRiple directiva tendría prioridad sobre uno con un tema personalizado.

    Demo

    API References

    Additional Resources

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