Web Components 선형 진행 개요

    Ignite UI for Web Components 선형 진행 Indicator 구성 요소는 애플리케이션의 프로세스가 변화함에 따라 시각적으로 표시되는 지표를 제공합니다. 표시기는IgcLinearProgressComponent 상태가 변함에 따라 외관을 업데이트합니다. 또한, 이 컴포넌트를 줄무늬나 단색으로 선택할 수 있습니다.

    Web Components Linear Progress Example

    Usage

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

    npm install igniteui-webcomponents

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

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

defineComponents(IgcLinearProgressComponent);

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

    사용하기 가장 간단한 방법은IgcLinearProgressComponent 다음과 같습니다:

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

    Progress Types

    속성 기능을 사용variant 해 지표 유형을 설정할 수 있습니다. 선형 진행 지표에는 다섯 가지 유형이 있습니다 -기본 (기본값), 오류(error), 성공(success), 정보(info), 경고(warning).

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

    Striped Progress

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

    Indeterminate Progress

    정확히 결정되지 않은 과정을 추적하고 싶다면, 속성을 설정할indeterminate 수 있습니다.

    Animation Duration

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

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

    Text Properties

    속성 기능을 사용labelAlign 해 기본값을 정렬할 수 있습니다. 허용되는 값은 상단, 하단, 상단-시작, 상단, 하단,​ ​하단 입니다.

    진행 상황 표시기의 기본 라벨을 숨기려면 속성 를hideLabel 사용하세요.

    이 속성은labelFormat 기본 라벨을IgcLinearProgressComponent 커스터마이즈하는 데 사용할 수 있습니다.

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

    Dynamic Progress

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

    Styling

    이 컴포넌트는IgcLinearProgressComponent 거의 모든 내부 요소에 대해 CSS 파트를 노출합니다:

    이름 설명
    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