Visão geral da diretiva Ripple Angular

    O componente Ignite UI for Angular Ripple cria uma animação em resposta a um toque ou clique do mouse.

    Angular Ripple Example

    Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

    Getting Started with Ignite UI for Angular Ripple Directive

    Para começar a usar a diretiva Ignite UI for Angular Ripple, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar oIgxRippleModule arquivo no 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 {}

    Alternatively, as of 16.0.0 you can import the IgxRippleDirective as standalone dependencies.

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

    Now that you have the Ignite UI for Angular Ripple module or directive imported, you can start using the igxRipple directive.

    Warning

    The igxRipple uses the Web Animation API and runs natively on browsers that support it. The web-animations.min.js polyfill is available for other browsers.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    Use the igxRipple directive to add a ripple effect to the specified element:

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

    Examples

    Custom Color

    You can easily change the default ripple color using the igxRipple:

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

    Centered Ripple Effect

    By default, the ripple effect starts from the position of the click event. You can change this behavior using the igxRippleCentered property and setting the center of the element as origin.

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

    Ripple Duration

    We can use the igxRippleDuration property to change the duration of the ripple animation, which, by default, is set to 600 milliseconds.

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

    Ripple Target

    Use the igxRippleTarget property to attach a ripple effect to a specific element inside a parent element.

    <div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
  ...
  <button class="sample-button child" igxButton="contained">Read More</button>
</div>

    Observe que não importa se você clica no elemento pai ou filho, o efeito cascata aparecerá apenas no botão.

    Note

    The child element, which you want to target with the igxRippleTarget property, has to be relatively positioned.

    Estilização

    First, in order to use the functions exposed by the theme engine, we need to import the index file, where all styling functions and mixins are located, into our style file:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    You can easily create a new theme, that extends the ripple-theme and accepts the parameters, required to customize the ripple as desired.

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

    O próximo passo é passar o tema ripple personalizado:

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

    A color set using the igxRiple directive would take precedence over one set by a custom theme.

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.