Descripción general de Web Components Ripple

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

Web Components Ripple Example

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

defineComponents(IgcButtonComponent, IgcRippleComponent);
export class RippleButton {
    constructor() {
    }
}

new RippleButton();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Ripple Button</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-button>
          <igc-ripple></igc-ripple>
          Ripple Button
        </igc-button>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

En primer lugar, debe instalar el 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 Primeros pasos.

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;

Examples

Color

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

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

import { defineComponents, IgcButtonComponent, IgcRippleComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './RippleColorStyles.css'

defineComponents(IgcButtonComponent, IgcRippleComponent);
export class RippleColor {
    constructor() {
    }
}

new RippleColor();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Ripple Color</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-button>
          <igc-ripple></igc-ripple>
          Ripple Color
        </igc-button>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

Descripción general de Web Components Ripple

Web Components Ripple Example

Usage

Examples

Color

API References

Additional Resources