Blazor 선형 진행 개요

    Ignite UI for Blazor 선형 진행 표시기 컴포넌트는 애플리케이션의 프로세스가 변경될 때 시각적 표시기를 제공합니다. 상태 변화에 따라 표시기의 모양이 업데이트됩니다. 또한 이 컴포넌트의 색상을 스트라이프 또는 솔리드로 선택하여 스타일을 지정할 수 있습니다.

    Blazor Linear Progress Example

    Usage

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

    // in Program.cs file

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

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

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

    <IgbLinearProgress Value=100 />

    Progress Types

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

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

    Striped Progress

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

    Indeterminate Progress

    정확하게 결정되지 않은 프로세스를 추적하려면 indeterminate 속성을 설정하면 됩니다.

    Animation Duration

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

    <IgbLinearProgress AnimationDuration=5000 Indeterminate=true />

    Text Properties

    ​labelAlign 속성을 사용하여 기본값을 정렬할 수 있습니다. 허용되는 값은 top, Bottom, top-start, top-end, Bottom-start 및 Bottom-end 입니다.

    진행률 표시기의 기본 레이블을 숨기려면 hideLabel 속성을 사용하십시오.

    ​labelFormat 속성을 사용하여 IgbLinearProgress 기본 레이블을 사용자 정의할 수 있습니다.

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

    Dynamic Progress

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

    Styling

    선형 진행 표시기 구성 요소는 거의 모든 내부 요소에 대한 CSS 부분을 노출합니다.

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

    이름 설명
    길 진행률 링의 트랙 영역입니다.
    채우다 진행률 표시기 영역입니다.
    줄무늬 진행 줄무늬 표시기입니다.
    상표 진행률 표시기 레이블입니다.
    값 진행률 레이블 값입니다.
    불확정 진행 불확정 상태입니다.
    주요한 진행률 표시기 기본 상태입니다.
    위험 진행률 표시기 오류 상태입니다.
    경고 진행률 표시기 경고 상태입니다.
    정보 진행률 표시기 정보 상태입니다.
    성공 진행률 표시기 성공 상태입니다.
    맨 위 진행률 레이블 위치입니다.
    최고 시작 진행률 레이블 위치입니다.
    최고급 진행률 레이블 위치입니다.
    맨 아래 진행률 레이블 위치입니다.
    하단 시작 진행률 레이블 위치입니다.
    최하위 진행률 레이블 위치입니다.

    API References

    Additional Resources