Descripción general React Ripple

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

    Ejemplo de React Ripple

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react
    cmd

    Luego necesitarás importar IgrRipple, su CSS necesario y registrar su módulo, así:

    import { IgrRippleModule, IgrRipple } from 'igniteui-react';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    IgrRippleModule.register();
    tsx
    <IgrButton>
      <IgrRipple></IgrRipple>
      <span>Ripple Button</span>
    </IgrButton>
    tsx

    Puede agregar el componente IgrRipple a cualquier elemento web siempre que su propiedad position CSS esté establecida en cualquier otro valor que no sea static;

    Ignite UI for React | CTA Banner

    Ejemplos

    Color

    Puede cambiar el color de la onda estableciendo la propiedad CSS--color en cualquier color CSS válido:

    igc-ripple {
      --color: olive;
    }
    css

    EXAMPLE
    TSX
    CSS

    Referencias de API

    Recursos adicionales