Visão geral do Web Components Ripple

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

    Web Components Exemplo de Ripple

    Uso

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Antes de usar o IgcRippleComponent, você precisa registrá-lo da seguinte forma:

    import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents"; import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcRippleComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    A maneira mais simples de começar a usar o IgcRippleComponent é a seguinte:

    <igc-button> <igc-ripple></igc-ripple> Ripple Button </igc-button>

    Você pode adicionar o IgcRippleComponent componente a qualquer elemento da web, desde que sua propriedade CSS position esteja definida como qualquer outro valor que static;

    Exemplos

    Cor

    Você pode alterar a cor da ondulação definindo a propriedade CSS--color para qualquer cor CSS válida:

    igc-ripple { --color: olive; }

    Referências de API

    Recursos adicionais