Web Components 선형 진행 개요

Ignite UI for Web Components 선형 진행 Indicator 구성 요소는 응용 프로그램의 프로세스가 변경될 때 이를 시각적으로 보여 줍니다. IgcLinearProgressComponent 인디케이터는 상태가 변경됨에 따라 모양을 업데이트합니다. 또한 줄무늬 또는 솔리드에서 색상을 선택하여 이 구성요소의 스타일을 지정할 수 있습니다.

Web Components Linear Progress Example

import { defineComponents, IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);
export class SimpleLinearProgress {
    constructor() {
    }
}

new SimpleLinearProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Linear Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress value="100"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents
cmd

IgcLinearProgressComponent를 사용하기 전에 다음과 같이 등록해야 합니다.

import {defineComponents, IgcLinearProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

사용을 IgcLinearProgressComponent 시작하는 가장 간단한 방법은 다음과 같습니다.

<igc-linear-progress value="100"></igc-linear-progress>
html

Progress Types

variant 속성을 사용하여 표시기 유형을 설정할 수 있습니다. 선형 진행률 표시기에는 기본 (기본값), 오류, 성공, 정보 및 경고의 5가지 유형이 있습니다.

<igc-linear-progress value="100" variant="success"></igc-linear-progress>
html

Striped Progress

striped 속성을 사용하여 표시기를 줄무늬로 만들 수 있습니다.

import { defineComponents,IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent);

export class ProgressIndicatorTypes {
    constructor() {
    }
}

new ProgressIndicatorTypes();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Progress Indicator Types</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress value="100" variant="primary"></igc-linear-progress>
        <igc-linear-progress value="100" variant="success" striped></igc-linear-progress>
        <igc-linear-progress value="100" variant="danger"></igc-linear-progress>
        <igc-linear-progress value="100" variat="info" striped></igc-linear-progress>
        <igc-linear-progress value="100" variant="warning"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Indeterminate Progress

정확하게 결정되지 않은 프로세스를 추적하려면 indeterminate 속성을 설정하면 됩니다.

Animation Duration

animationDuration 속성은 애니메이션 주기에 걸리는 시간을 지정하는 데 사용됩니다. 애니메이션 지속 시간을 밀리초 단위로 나타내는 숫자를 값으로 사용합니다.

<igc-linear-progress animation-duration="5000" indeterminate></igc-linear-progress>
html

Text Properties

labelAlign 속성을 사용하여 기본값을 정렬할 수 있습니다. 허용되는 값은 top, Bottom, top-start, top-end, Bottom-start 및 Bottom-end 입니다.

진행률 표시기의 기본 레이블을 숨기려면 hideLabel 속성을 사용하십시오.

labelFormat 속성을 사용하여 IgcLinearProgressComponent 기본 레이블을 사용자 정의할 수 있습니다.

다음 샘플은 위 구성을 보여줍니다.

import { defineComponents, IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './LinearProgressStyles.css'

defineComponents(IgcLinearProgressComponent);

export class ProgressIndicatorStyles {
    constructor() {
    }
}

new ProgressIndicatorStyles();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Progress Indicator Styles</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress class="progress-container" value="100" variant="primary"></igc-linear-progress>
        <igc-linear-progress class="progress-container" value="100" variant="success" indeterminate striped></igc-linear-progress>
        <igc-linear-progress value="100" variant="danger" label-align="bottom-end" label-format="Custom text"></igc-linear-progress>
        <igc-linear-progress class="progress-container" value="100" variant="info" striped hide-label></igc-linear-progress>
        <igc-linear-progress class="progress-container" value="100" variant="warning" label-align="bottom-start"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

.progress-container{
    margin-bottom: 15px;
}css

Dynamic Progress

버튼과 같은 외부 컨트롤을 사용하여 진행률 표시기의 값을 동적으로 변경할 수 있습니다. 이를 달성하기 위해 값을 클래스 속성에 바인딩할 수 있습니다.

import { defineComponents, IgcIconButtonComponent, IgcLinearProgressComponent, registerIconFromText} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcLinearProgressComponent, IgcIconButtonComponent);
const addIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>';
const removeIcon =
    '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>';

export class DynamicLinearProgress {
    private linearProgress: IgcLinearProgressComponent
    private addIcon: IgcIconButtonComponent;
    private removeIcon: IgcIconButtonComponent

    constructor() {
        registerIconFromText("remove", removeIcon, "material");
        registerIconFromText("add", addIcon, "material");
        this.linearProgress = document.getElementById("linearProgress") as IgcLinearProgressComponent;
        this.removeIcon = document.getElementById("removeIcon") as IgcIconButtonComponent;
        this.addIcon = document.getElementById("addIcon") as IgcIconButtonComponent;

        this.removeIcon.addEventListener('click', () => {
            if(this.linearProgress.value > 0) {
                this.linearProgress.value = this.linearProgress.value - 10;
            }
            else {
                this.linearProgress.value = 0;
            }
        });

        this.addIcon.addEventListener('click', () => {
            this.linearProgress.value = this.linearProgress.value + 10;
        });
    }
}

new DynamicLinearProgress();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Linear Progress Indicator</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress id="linearProgress" max="100" value="50" label-align="bottom-start"></igc-linear-progress>
        <div class="button-container">
          <igc-icon-button id="removeIcon" name="remove" collection="material"></igc-icon-button>
          <igc-icon-button id="addIcon" name="add" collection="material"></igc-icon-button>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

이 IgcLinearProgressComponent 구성 요소는 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다.

이름	설명
`track`	진행률 링의 트랙 영역입니다.
`fill`	진행률 표시기 영역입니다.
`striped`	진행 줄무늬 표시기입니다.
`label`	진행률 표시기 레이블입니다.
`value`	진행률 레이블 값입니다.
`indeterminate`	진행 불확정 상태입니다.
`primary`	진행률 표시기 기본 상태입니다.
`danger`	진행률 표시기 오류 상태입니다.
`warning`	진행률 표시기 경고 상태입니다.
`info`	진행률 표시기 정보 상태입니다.
`success`	진행률 표시기 성공 상태입니다.

이 CSS 부분을 사용하여 선형 진행 스타일을 거의 완전히 제어할 수 있습니다.

import { defineComponents, IgcLinearProgressComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './LinearProgressStyling.css';

defineComponents(IgcLinearProgressComponent);

export class LinearProgressStyling {
    constructor() {
    }
}

new LinearProgressStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Linear Progress Indicator Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v5.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-linear-progress value="100"></igc-linear-progress>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-linear-progress::part(track){
    background-color: #D3D3D3
}

igc-linear-progress::part(fill){
    background-color: #ECAA53
}

igc-linear-progress::part(label){
    color: #ECAA53
}css

igc-linear-progress::part(track){
  background-color: var(--ig-gray-300)
}

igc-linear-progress::part(fill){
  background-color: var(--ig-primary-300)
}

igc-linear-progress::part(label){
  color: var(--ig-primary-300)
}
css