Web Components 선형 진행 개요

    The Ignite UI for Web Components Linear Progress Indicator component provides a visual indicator of an application’s process as it changes. The IgcLinearProgressComponent indicator updates its appearance as its state changes. Also, you can style this component with a choice of colors in stripes or solids.

    Web Components Linear Progress Example

    Usage

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

    npm install igniteui-webcomponents

    Before using the IgcLinearProgressComponent, you need to register it as follows:

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

defineComponents(IgcLinearProgressComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    The simplest way to start using the IgcLinearProgressComponent is as follows:

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

    Progress Types

    You can set the type of your indicator, using the variant attribute. There are five types of linear progress indicators - primary (default), error, success, info, and warning.

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

    Striped Progress

    You can make the indicator striped, using the striped property:

    Indeterminate Progress

    If you want to track a process that is not determined precisely, you can set the indeterminate property.

    Animation Duration

    The animationDuration property is used to specify how long the animation cycle should take. It takes as value a number which represents the animation duration in milliseconds.

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

    Text Properties

    You can align the default value, using the labelAlign property. Permitted values are top, bottom, top-start, top-end, bottom-start and bottom-end.

    To hide the default label of the progress indicator, use the hideLabel attribute.

    The labelFormat property can be used to customize the IgcLinearProgressComponent default label.

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

    Dynamic Progress

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

    Styling

    The IgcLinearProgressComponent component exposes CSS parts for almost all of its inner elements:

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

    이 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)
}

    API References

    Additional Resources