React Circular Progress Overview

    Ignite UI for React 순환 진행 지표 구성 요소는 애플리케이션의 프로세스가 변화함에 따라 시각적으로 표시되는 지표를 제공합니다. 원형 표시기는 상태가 변함에 따라 외관을 업데이트합니다.

    React Circular Progress Example

    Usage

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

    npm install igniteui-react

    그 다음에는 필요한 CSS를 가져오IgrCircularProgress 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { IgrCircularProgressModule, IgrCircularProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCircularProgressModule.register();

    <IgrCircularProgress value="100"></IgrCircularProgress>

    Progress Types

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

    <IgrCircularProgress value="100" variant="success"></IgrCircularProgress>

    Indeterminate Progress

    정확히 결정되지 않은 과정을 추적하고 싶다면, 속성을 설정할indeterminate 수 있습니다. 또한, Ignite UI for ReactIgrCircularProgress의 기본 레이블을 속성으로hideLabel 설정해 숨기고, 노출labelFormat 된 속성으로 진행 표시 기본 라벨을 커스터마이즈할 수도 있습니다.

    <IgrCircularProgress value="100" indeterminate="true"></IgrCircularProgress>

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

    Animation Duration

    컴포넌트animationDuration의 속성을 사용IgrCircularProgress 해 애니메이션 사이클이 밀리초 단위로 얼마나 걸리는지 지정할 수 있습니다.

    <IgrCircularProgress animationDuration="5000" indeterminate="true"></IgrCircularProgress>

    Gradient Progress

    진행gradient 바를 단색 대신 색상 그라데이션으로 커스터마이즈할 수 있는 노출된 슬롯을 통해 가능하며,IgrCircularGradient이 슬롯이 그라데이션 스톱을 정의합니다.

    [!Note] For each IgrCircularGradient defined as gradient slot of Ignite UI for React IgrCircularProgress a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

    <IgrCircularProgress >
    <IgrCircularGradient slot="gradient" offset="0%" color="#ff9a40">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="50%" color="#1eccd4">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="100%" color="#ff0079">
    </IgrCircularGradient>
</IgrCircularProgress>

    Styling

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

    이름 설명
    svg 진행 SVG 요소입니다.
    gradient_start 진행 선형 그라데이션 시작 색상입니다.
    gradient_end 진행 선형 그라데이션 끝 색상입니다.
    track 진행률 링의 트랙 영역입니다.
    fill 진행률 표시기 영역입니다.
    label 진행률 레이블입니다.
    value 진행률 레이블 값입니다.
    indeterminate 진행 불확정 상태입니다.
    primary 진행률 표시기 기본 상태입니다.
    danger 진행률 표시기 오류 상태입니다.
    warning 진행률 표시기 경고 상태입니다.
    info 진행률 표시기 정보 상태입니다.
    success 진행률 표시기 성공 상태입니다.

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

    
igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}

    API References

    Additional Resources