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에 대한 전체 소개는 시작 항목을 참조하십시오.
The next step is to import the IgxProgressBarModule in the app.module.ts file:
// 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;
}
Now that you have the Ignite UI for Angular Progress Bar module or directives imported, you can start using the igx-linear-bar component.
Using the Angular Linear Progress
모든 것이 어떻게 작동하는지 더 잘 이해하기 위해 데모에 있는 것과 같은 간단한 예를 만들어 보겠습니다.
<igx-linear-bar [value]="100"></igx-linear-bar>
그런 다음 브라우저에 데모 샘플이 표시됩니다.
Progress Types
You can set the type of your bar, using the type attribute. There are five types of linear progress bars - default, error, success, info, and warning.
Striped Progress
You can make the bar striped, using the striped property and by setting it to 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
If you want to track a process that is not determined precisely, you can set the indeterminate input property to true.
Animation Duration
The animationDuration input property is used to specify how long the animation cycle should take.
다음 예제에서는 애니메이션 지속 시간을 5초로 지정합니다.
<igx-linear-bar [striped]="false" [value]="100" [animationDuration]="5000"></igx-linear-bar>
Text Properties
You can align the text, using the textAlign property. Permitted values are left, center, and right.
To hide the text, use the textVisibility property and set its value to false.
Set the textTop property to true to move the text above the bar.
The text property can be used to customize the value of the text itself.
앞서 언급한 텍스트 속성을 사용하여 이전 샘플을 업데이트해 보겠습니다. 또한 믹스에 불확실한 진행률 표시줄이 표시됩니다.
<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>
And do not forget to import the IgxTextAlign enumerator in your component if you're using the textAlign property.
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
If the step input value is not defined, the progress update is 1% of the max value. In case you want the progress to be faster, the step value should be greater than (max * 1%), respectfully for slower progress the step should be less than the default progress update.
Note
If the step value is defined greater than the value input, there is only one update, which gets the value that is passed for progress update.
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;
}
}
위의 단계를 완료하면 진행률 표시줄이 다음과 같아야 합니다.
스타일링
To get started with styling the linear progress bar, we need to import the index file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the progress-linear-theme and override the $fill-color-default and $text-color parameters.
$custom-theme: progress-linear-theme(
$fill-color-default: #ecaa53,
$text-color: #ecaa53,
);
Including Themes
마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
@include css-vars($custom-theme);
Demo
API
GitHub