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';
// 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';
// 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 가져왔으므로 igxRipple 지시문 사용을 시작할 수 있습니다.

    Warning

    ​igxRipple은 Web Animation 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: #217346
);

    Using CSS variables

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

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

    Using Component Theme Overrides

    Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

    :host {
    ::ng-deep {
        // Pass the custom ripple theme to the `igx-ripple` mixin
        @include ripple($custom-ripple-theme);
    }
}
    Note

    ​igxRiple 지시어를 사용하여 설정된 색상은 사용자 정의 테마에 설정된 색상보다 우선합니다.

    Demo

    API References

    Additional Resources

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