Web Components Ripple 개요

    Ignite UI for Web Components Ripple 구성 요소는 터치 또는 마우스 클릭에 대한 응답으로 애니메이션을 만듭니다.

    Web Components Ripple Example

    Usage

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

    사용하기IgcRippleComponent 전에 다음과 같이 등록해야 합니다:

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

defineComponents(IgcRippleComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    사용하기 가장 간단한 방법은IgcRippleComponent 다음과 같습니다:

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

    다음에 추가할 수 있습니다.IgcRippleComponent CSS인 웹 요소의 컴포넌트입니다position 속성은 이외의 값으로 설정됩니다.static;

    Examples

    Color

    CSS 속성을 유효한 CSS 색상으로 설정--color 하면 리플의 색상을 변경할 수 있습니다:

    igc-ripple {
  --color: olive;
}

    API References

    Additional Resources