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

    ​--color CSS 속성을 유효한 CSS 색상으로 설정하여 잔물결 색상을 변경할 수 있습니다.

    igc-ripple {
  --color: olive;
}

    API References

    Additional Resources