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/directives';
// import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package

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

    Alternativamente,16.0.0 você pode importar comoIgxRippleDirective dependências independentes.

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

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

    Warning

    EleigxRipple usa a API de Animação Web e roda nativamente em navegadores que a suportam. Oweb-animations.min.js polyfill está disponível para outros navegadores.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    Use aigxRipple diretiva para adicionar um efeito cascata ao elemento especificado:

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

    Examples

    Custom Color

    Você pode facilmente mudar a cor padrão do ripple usando oigxRipple:

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

    Centered Ripple Effect

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

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

    Ripple Duration

    Podemos usar aigxRippleDuration propriedade para mudar a duração da animação de ondulação, que, por padrão, está definida para 600 milissegundos.

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

    Ripple Target

    Use aigxRippleTarget propriedade para atribuir 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ê quer mirar com aigxRippleTarget propriedade, precisa estar relativamente posicionado.

    Estilização

    Primeiro, para usar as funções expostas pelo motor de temas, precisamos importar oindex arquivo, onde todas as funções de estilo e mixins estão localizadas, para o 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 eripple-theme aceita os parâmetros necessários para personalizar o ondulado 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 aigxRiple diretiva teria precedência sobre um conjunto por um tema personalizado.

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.