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 o IgxRippleModule no arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxRippleDirective como dependências autônomas.

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

    Agora que você importou o módulo ou a diretiva Ignite UI for Angular Ripple, você pode começar a usar a diretiva igxRipple.

    Warning

    O igxRipple usa a Web Animation API e roda nativamente em navegadores que o suportam. O polyfill web-animations.min.js está disponível para outros navegadores.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    Use a diretiva igxRipple para adicionar um efeito cascata ao elemento especificado:

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

    Examples

    Custom Color

    Você pode alterar facilmente a cor padrão do ripple usando o igxRipple:

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

    Centered Ripple Effect

    Por padrão, o efeito ripple começa na posição do evento de clique. Você pode alterar esse comportamento usando a propriedade igxRippleCentered e definindo o centro do elemento como origem.

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

    Ripple Duration

    Podemos usar a propriedade igxRippleDuration para alterar a duração da animação ripple, que, por padrão, é definida como 600 milissegundos.

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

    Ripple Target

    Use a propriedade igxRippleTarget para anexar um efeito cascata a um elemento específico dentro de um elemento pai.

    <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

    O elemento filho, que você deseja atingir com a propriedade igxRippleTarget, deve estar posicionado relativamente.

    Estilização

    Primeiro, para usar as funções expostas pelo mecanismo de tema, precisamos importar o arquivo index, onde todas as funções de estilo e mixins estão localizados, para nosso arquivo 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';

    Você pode facilmente criar um novo tema que estenda o ripple-theme e aceite os parâmetros necessários para personalizar o ripple conforme desejado.

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

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

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

    Um conjunto de cores usando a diretiva igxRiple teria precedência sobre um conjunto definido por um tema personalizado.

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.