Angular 선형 진행 구성 요소 개요
Ignite UI for Angular 선형 진행 막대 표시기 구성 요소는 애플리케이션 프로세스가 변경될 때 시각적 표시기를 제공합니다. 표시기는 상태가 변경될 때 모양이 업데이트됩니다. 표시기는 줄무늬 또는 단색의 색상 선택으로 스타일을 지정할 수 있습니다.
Angular Linear Progress Example
Getting Started with Ignite UI for Angular Linear Progress
Ignite UI for Angular 선형 진행 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxProgressBarModule 안에 app.module.ts 파일:
// app.module.ts
...
import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxProgressBarModule],
...
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져오IgxLinearProgressBarComponent 거나, 토큰을IGX_LINEAR_PROGRESS_BAR_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.
// home.component.ts
import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
// import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-linear-bar [value]="progress"></igx-linear-bar>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_LINEAR_PROGRESS_BAR_DIRECTIVES],
/* or imports: [IgxLinearProgressBarComponent] */
})
export class HomeComponent {
public progress = 50;
}
이제 Ignite UI for Angular Progress Bar 모듈이나 지시를 가져왔으니, 컴포넌트를igx-linear-bar 사용할 수 있습니다.
Using the Angular Linear Progress
모든 것이 어떻게 작동하는지 더 잘 이해하기 위해 데모에 있는 것과 같은 간단한 예를 만들어 보겠습니다.
<igx-linear-bar [value]="100"></igx-linear-bar>
그런 다음 브라우저에 데모 샘플이 표시됩니다.
Progress Types
속성 기준type으로 바의 유형을 설정할 수 있습니다. 선형 진행 바는 다섯 가지 유형이 있습니다 -default,errorsuccessinfo 그리고warning
Striped Progress
속성을 사용striped 해 바를 줄무늬로 만들 수 있고, 설정하면 됩니다true.
스트라이프 여부에 관계없이 다양한 유형의 진행률 표시줄을 만드는 방법을 살펴보겠습니다.
<div class="linear-container">
<igx-linear-bar [value]="100" type="default"></igx-linear-bar>
<igx-linear-bar [value]="100" type="success" [striped]="true"></igx-linear-bar>
<igx-linear-bar [value]="100" type="error"></igx-linear-bar>
<igx-linear-bar [value]="100" type="info" [striped]="true"></igx-linear-bar>
<igx-linear-bar [value]="100" type="warning"></igx-linear-bar>
</div>
따라서 모든 것을 올바르게 설정했다면 브라우저에 다음이 표시되어야 합니다.
Indeterminate Progress
정확히 결정되지 않은 프로세스를 추적하고 싶다면, 입력 속성을 를 설정할indeterminate 수 있습니다.true
Animation Duration
입력 속성은animationDuration 애니메이션 사이클에 걸리는 시간을 지정하는 데 사용됩니다.
다음 예제에서는 애니메이션 지속 시간을 5초로 지정합니다.
<igx-linear-bar [striped]="false" [value]="100" [animationDuration]="5000"></igx-linear-bar>
Text Properties
텍스트를 정렬할 수 있는textAlign 속성은 다음과 같습니다. 허용 값은 ,leftcenter, 입니다right.
텍스트를 숨기려면 속성 을textVisibility 사용하고 값을 다음과false 같이 설정하세요.
다음 설정을textTop 속성은true 텍스트를 바 위로 이동시키는 것.
이 속성은text 텍스트 자체의 값을 커스터마이징하는 데 사용할 수 있습니다.
앞서 언급한 텍스트 속성을 사용하여 이전 샘플을 업데이트해 보겠습니다. 또한 믹스에 불확실한 진행률 표시줄이 표시됩니다.
<div class="linear-container">
<igx-linear-bar type="default" [value]="100"></igx-linear-bar>
<igx-linear-bar
type="success"
[value]="100"
class="indeterminate"
[indeterminate]="true"
[striped]="true"
></igx-linear-bar>
<igx-linear-bar
type="error"
[value]="100"
[textAlign]="positionEnd"
[text]="'Custom text'"
></igx-linear-bar>
<igx-linear-bar
type="info"
[value]="100"
[textVisibility]="false"
[striped]="true"
></igx-linear-bar>
<igx-linear-bar
type="warning"
[value]="100"
[textTop]="true"
></igx-linear-bar>
</div>
그리고 반드시 수입하는 것을 잊지 마세요IgxTextAlign 만약 당신이 다음의 부품을 사용하고 있다면 Enumerator를 사용한다면textAlign 재산.
import { ..., IgxTextAlign } from 'igniteui-angular/progressbar';
// import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package
...
public positionCenter: IgxTextAlign = IgxTextAlign.CENTER;
public positionEnd: IgxTextAlign = IgxTextAlign.END;
이것이 어떻게 밝혀졌는지 살펴보겠습니다.
Note
입력 값이step 정의되지 않았다면, 진행 상황 업데이트는 값max의 1% 입니다. 진행 속도를 높이고 싶다면 값이step (max* 1%) 이상이어야 하며, 느린 진행step 속도는 기본 진행 업데이트보다 낮게 설정해야 합니다.
Dynamic Progress
단추와 같은 외부 컨트롤을 사용하여 진행률 표시줄의 값을 동적으로 변경할 수 있습니다. 이를 위해 값을 클래스 속성에 바인딩할 수 있습니다.
<div class="linear-container">
<igx-linear-bar [value]="currentValue" [max]="100"></igx-linear-bar>
<div class="button-container">
<button igxIconButton="flat" (click)="decrementProgress()">
<igx-icon fontSet="material">remove</igx-icon>
</button>
<button igxIconButton="flat" (click)="incrementProgress()">
<igx-icon fontSet="material">add</igx-icon>
</button>
</div>
</div>
값을 증가 및 감소시키는 메소드를 작성하십시오.
public currentValue: number;
public ngOnInit() {
this.currentValue = 0;
}
public incrementProgress() {
this.currentValue += 10;
if (this.currentValue > 100) {
this.currentValue = 100;
}
}
public decrementProgress() {
this.currentValue -= 10;
if (this.currentValue < 0) {
this.currentValue = 0;
}
}
위의 단계를 완료하면 진행률 표시줄이 다음과 같아야 합니다.
스타일링
선형 진행 바 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹신이 있는 파일을 가져와index야 합니다:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 방법을 따라, 우리는 다음 주제를 확장하는 새로운 주제를 만듭니다.progress-linear-theme 그리고 다음$fill-color-default 그리고$text-color 매개변수.
$custom-theme: progress-linear-theme(
$fill-color-default: #ecaa53,
$text-color: #ecaa53,
);
Including Themes
마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
@include css-vars($custom-theme);
Demo
API
GitHub