Blazor 순환 진행 개요

    Ignite UI for Blazor 애플리케이션 프로세스가 변경됨에 따라 시각적 표시기를 제공합니다. 원형 표시기는 상태가 변경됨에 따라 모양을 업데이트합니다.

    Blazor Circular Progress Example

    Usage

    ​IgbCircularProgress를 사용하기 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));

    또한 IgbCalendar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbCircularProgress Value=100/>

    Progress Types

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

    <IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success  />

    Indeterminate Progress

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

    <IgbCircularProgress Value=100 Indeterminate=true/>

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

    Animation Duration

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

    <IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

    Gradient Progress

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

    [!Note] For each IgbCircularGradient defined as gradient slot of Ignite UI for Blazor IgbCircularProgress 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.

    <IgbCircularProgress>
    <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
    <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
    <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
</IgbCircularProgress>

    Styling

    Ignite UI for Blazor 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다.

    다음 표에는 순환 진행에 의해 노출된 모든 CSS 부분이 나열되어 있습니다.

    이름 설명
    svg 진행 SVG 요소입니다.
    그래디언트_시작 진행 선형 그라데이션 시작 색상입니다.
    그래디언트_엔드 진행 선형 그라데이션 끝 색상입니다.
    길 진행률 링의 트랙 영역입니다.
    채우다 진행률 표시기 영역입니다.
    상표 진행률 레이블입니다.
    값 진행률 레이블 값입니다.
    불확정 진행 불확정 상태입니다.
    주요한 진행률 표시기 기본 상태입니다.
    위험 진행률 표시기 오류 상태입니다.
    경고 진행률 표시기 경고 상태입니다.
    정보 진행률 표시기 정보 상태입니다.
    성공 진행률 표시기 성공 상태입니다.

    API References

    Additional Resources