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
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.