React Ripple 개요

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

React Ripple 예제

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRipple, IgrRippleModule, IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRippleModule.register();
IgrButtonModule.register();

export default class RippleButton extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container-center sample">
                <IgrButton>
                    <IgrRipple></IgrRipple>
                    <span>Ripple Button</span>
                </IgrButton>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RippleButton/>);
tsxコピー

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

Edit in: Codesandbox

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

npm install igniteui-react
cmd

그런 다음 필요한 CSS인 IgrRipple을 가져와서 다음과 같이 모듈을 등록해야 합니다.

import { IgrRippleModule, IgrRipple } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRippleModule.register();
tsx

<IgrButton>
  <IgrRipple></IgrRipple>
  <span>Ripple Button</span>
</IgrButton>
tsx

다음을 추가할 수 있습니다. IgrRipple CSS가 있는 한 모든 웹 요소에 대한 구성 요소 position 속성이 다음 이외의 다른 값으로 설정되었습니다. static;

예

색상

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

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

EXAMPLE

TSX

CSS

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrRipple, IgrRippleModule, IgrButton, IgrButtonModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrRippleModule.register();
IgrButtonModule.register();

export default class RippleColor extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container-center sample">
                <IgrButton>
                    <IgrRipple></IgrRipple>
                    <span>Ripple Button</span>
                </IgrButton>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<RippleColor/>);
tsxコピー

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

igc-ripple {
    --color: yellow;
}cssコピー

Edit in: Codesandbox

API 참조

• IgrButton
• IgrRipple
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub