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 {}

    또는16.0.0 현재로서는 독립 실행형 의존성을 가져오IgxRippleDirective는 것도 방법입니다.

    // 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 {}

    이제 Ignite UI for Angular Ripple 모듈이나 디렉티브를 가져왔으니, 디igxRipple 렉티브 사용을 시작할 수 있습니다.

    Warning

    웹igxRipple 애니메이션 API를 사용하며, 이를 지원하는 브라우저에서 네이티브로 실행됩니다.폴리필은web-animations.min.js 다른 브라우저에서도 사용할 수 있습니다.

    Using the Angular Ripple Directive

    Adding Ripple Effect

    지정된 요소에 파급 효과를 추가하는 지시를 사용igxRipple 하세요:

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

    Examples

    Custom Color

    기본 리플 색상은 다음과 같은 방법으로igxRipple 쉽게 변경할 수 있습니다:

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

    Centered Ripple Effect

    기본적으로 리플 효과는 클릭 이벤트의 위치에서 시작됩니다. 이 동작은 속성 설정igxRippleCentered과 원소 중심을 원점으로 설정하면 변경할 수 있습니다.

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

    Ripple Duration

    이 속성을 사용igxRippleDuration 해 기본적으로 600밀리초로 설정된 리플 애니메이션의 지속 시간을 변경할 수 있습니다.

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

    Ripple Target

    이 속성을 사용igxRippleTarget 해 부모 요소 내 특정 요소에 리플 효과를 부착하세요.

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

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

    Note

    속성으로igxRippleTarget 타겟팅하고 싶은 자식 요소는 상대적인 위치에 있어야 합니다.

    스타일링

    먼저, 테마 엔진에서 노출된 기능을 사용하려면 모든 스타일링 기능과 믹스인이 있는 파일을 스타일 파일에 가져와index야 합니다:

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

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

    리플을 원하는 대로 커스터마이즈하는 데 필요한 매개변수를 확장ripple-theme 하고 받아들이는 새로운 테마를 쉽게 만들 수 있습니다.

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

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

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

    지시를 사용하는igxRiple 색상 세트가 커스텀 테마의 색상 세트보다 우선시됩니다.

    Demo

    API References

    Additional Resources

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