Angular 리플 지침 개요

Ignite UI for Angular 터치나 마우스 클릭에 응답하여 애니메이션을 만듭니다.

Angular Ripple Example

이 샘플이 마음에 드시나요? 전체 Angular 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하세요. 무료로 다운로드하세요.

Getting Started with Ignite UI for Angular Ripple Directive

Ignite UI for Angular Ripple 지시어를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxRippleModule 안에 app.module.ts 파일.

// app.module.ts

import { IgxRippleModule } from 'igniteui-angular/directives';
// import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxRippleModule,
        ...
    ]
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxRippleDirective as standalone dependencies.

// home.component.ts

import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular/directives';
import { IgxButtonDirective } from 'igniteui-angular/button';
// import { IgxRippleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: '<button igxButton="contained" igxRipple>Click Me</button>',
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxRippleDirective, IgxButtonDirective],
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Ripple module or directive imported, you can start using the igxRipple directive.

Warning

The igxRipple uses the Web Animation API and runs natively on browsers that support it. The web-animations.min.js polyfill is available for other browsers.

Using the Angular Ripple Directive

Adding Ripple Effect

Use the igxRipple directive to add a ripple effect to the specified element:

<button igxButton="contained" igxRipple>Click Me</button>

Examples

Custom Color

You can easily change the default ripple color using the igxRipple:

<button igxButton="contained" igxRipple="white">White</button>

Centered Ripple Effect

By default, the ripple effect starts from the position of the click event. You can change this behavior using the igxRippleCentered property and setting the center of the element as origin.

<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true">
  Centered
</button>

Ripple Duration

We can use the igxRippleDuration property to change the duration of the ripple animation, which, by default, is set to 600 milliseconds.

<button igxButton="contained" igxRipple [igxRippleDuration]="2000">
  Click Me
</button>

Ripple Target

Use the igxRippleTarget property to attach a ripple effect to a specific element inside a parent element.

<div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
  ...
  <button class="sample-button child" igxButton="contained">Read More</button>
</div>

상위 요소를 클릭하든 하위 요소를 클릭하든 상관없이 파급 효과는 버튼에만 나타납니다.

Note

The child element, which you want to target with the igxRippleTarget property, has to be relatively positioned.

스타일링

First, in order to use the functions exposed by the theme engine, we need to import the index file, where all styling functions and mixins are located, into our style file:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

You can easily create a new theme, that extends the ripple-theme and accepts the parameters, required to customize the ripple as desired.

$custom-ripple-theme: ripple-theme(
  $color: #383779,
);

다음 단계는 사용자 정의 잔물결 테마를 전달하는 것입니다.

@include css-vars($custom-ripple-theme);

Note

A color set using the igxRiple directive would take precedence over one set by a custom theme.

Demo

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.