Descripción general de Ripple Web Components

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

    Ejemplo de ondulación Web Components

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents
    cmd

    Antes de utilizar IgcRippleComponent, debe registrarlo de la siguiente manera:

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

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de empezar a utilizarlo IgcRippleComponent es la siguiente:

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

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

    Ignite UI for Web Components | Banner de llamada a la acción

    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
    TS
    HTML
    index.css
    RippleColorStyles.css

    Referencias de API

    Recursos adicionales