Web Components Circular Progress 개요

    Ignite UI for Web Components Circular Progress Indicator 구성 요소는 응용 프로그램의 프로세스가 변경될 때 이를 시각적으로 보여 줍니다. 원형 표시기는 상태가 변경됨에 따라 모양을 업데이트합니다.

    Web Components Circular Progress Example

    EXAMPLE
    TS
    HTML
    CircularProgressStyle.css
    index.css
    Edit in:

    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

    그런 다음 IgcCircularProgressComponent와 필요한 CSS를 가져오고 다음과 같이 해당 모듈을 등록해야 합니다.

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

defineComponents(IgcCircularProgressComponent);
ts

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

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

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

    Progress Types

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

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

    Indeterminate Progress

    정확하게 결정되지 않은 프로세스를 추적하려면 속성을 설정할 indeterminate 수 있습니다. 또한 속성을 설정하여 Ignite UI for Web Components IgcCircularProgressComponent의 기본 레이블을 hideLabel 숨기고 노출 labelFormat 된 속성을 통해 진행률 표시기 기본 레이블을 사용자 지정할 수 있습니다.

    <igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>
html

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

    EXAMPLE
    TS
    HTML
    IndeterminateCircularProgressStyle.css
    index.css
    Edit in:

    Animation Duration

    당신은 사용할 수 있습니다 animationDuration의 재산 IgcCircularProgressComponent 애니메이션 주기에 걸리는 시간을 밀리초 단위로 지정하는 구성요소입니다.

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

    Gradient Progress

    단색 대신 색상 그라데이션을 사용하기 위해 진행률 표시줄을 사용자 정의하는 것은 노출된 gradient 슬롯과 그라데이션 중지점을 정의하는 IgcCircularGradientComponent 통해 수행할 수 있습니다.

    EXAMPLE
    TS
    HTML
    DynamicCircularProgressStyle.css
    index.css
    Edit in:

    For each IgcCircularGradientComponent defined as gradient slot of Ignite UI for Web Components IgcCircularProgressComponent 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.

    <igc-circular-progress>
    <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
</igc-circular-progress>
html
    Ignite UI for Web Components | CTA Banner

    Styling

    이 IgcCircularProgressComponent 구성 요소는 거의 모든 내부 요소에 대한 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);
}

css

    EXAMPLE
    TS
    HTML
    CircularProgressStyling.css
    index.css
    Edit in:

    API References

    Additional Resources