Web Components 선형 진행 개요

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

Web Components 선형 진행 예

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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

먼저 다음 명령을 실행하여 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

진행 유형

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

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

스트라이프 진행

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 속성을 설정하면 됩니다.

애니메이션 기간

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

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

텍스트 속성

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

동적 진행

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

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

스타일링

이 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