Angular 리플 지침 개요

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

    Angular 리플 예

    EXAMPLE

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

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

    Ignite UI for Angular Ripple 지시문 시작하기

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

    ng add igniteui-angular
    cmd

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

    또는 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 {}
    typescript

    이제 Ignite UI for Angular 가져왔으므로 igxRipple 지시어를 사용할 수 있습니다.

    igxRipple은 Web Animation API를 사용하고 이를 지원하는 브라우저에서 기본적으로 실행됩니다.​ ​web-animations.min.js 폴리필은 다른 브라우저에서 사용할 수 있습니다.

    Angular Ripple 지시어 사용

    파급 효과 추가

    igxRipple 지시문을 사용하여 지정된 요소에 파급 효과를 추가합니다.

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

    사용자 정의 색상

    igxRipple 사용하여 기본 잔물결 색상을 쉽게 변경할 수 있습니다.

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

    EXAMPLE

    중심 파급 효과

    기본적으로 파급 효과는 클릭 이벤트 위치에서 시작됩니다. igxRippleCentered 속성을 사용하고 요소의 중심을 원점으로 설정하여 이 동작을 변경할 수 있습니다.

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

    EXAMPLE

    리플 기간

    igxRippleDuration 속성을 사용하여 기본적으로 600밀리초로 설정되는 잔물결 애니메이션의 지속 시간을 변경할 수 있습니다.

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

    EXAMPLE

    리플 타겟

    igxRippleTarget 속성을 사용하면 상위 요소 내부의 특정 요소에 파급 효과를 연결할 수 있습니다.

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

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

    EXAMPLE

    igxRippleTarget 속성을 사용하여 대상으로 지정하려는 하위 요소는 상대적으로 배치되어야 합니다.

    App Builder | CTA 배너

    스타일링

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

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

    ripple-theme 확장하고 잔물결을 원하는 대로 사용자 정의하는 데 필요한 매개변수를 허용하는 새 테마를 쉽게 만들 수 있습니다.

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

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

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

    지시문을 사용하는 igxRiple 색 집합은 사용자 지정 테마에 의한 색 집합보다 우선합니다.

    데모

    EXAMPLE
    TS
    HTML
    SCSS

    API 참조

    추가 리소스

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