Web Components Ripple 개요

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

Web Components Ripple 예제

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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

npm install igniteui-webcomponentscmd

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

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

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

사용을 IgcRippleComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

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

IgcRippleComponent 구성요소의 CSS position 속성이 static 이외의 값으로 설정되어 있는 한 모든 웹 요소에 추가할 수 있습니다.

예

색상

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

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

Web Components Ripple 개요

Web Components Ripple 예제

용법

예

색상

API 참조

추가 리소스