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 부분이 나열되어 있습니다.
이름 | 설명 |
---|---|
길 | 진행률 링의 트랙 영역입니다. |
채우다 | 진행률 표시기 영역입니다. |
줄무늬 | 진행 줄무늬 표시기입니다. |
상표 | 진행률 표시기 레이블입니다. |
값 | 진행률 레이블 값입니다. |
불확정 | 진행 불확정 상태입니다. |
주요한 | 진행률 표시기 기본 상태입니다. |
위험 | 진행률 표시기 오류 상태입니다. |
경고 | 진행률 표시기 경고 상태입니다. |
정보 | 진행률 표시기 정보 상태입니다. |
성공 | 진행률 표시기 성공 상태입니다. |
맨 위 | 진행률 레이블 위치입니다. |
최고 시작 | 진행률 레이블 위치입니다. |
최고급 | 진행률 레이블 위치입니다. |
맨 아래 | 진행률 레이블 위치입니다. |
하단 시작 | 진행률 레이블 위치입니다. |
최하위 | 진행률 레이블 위치입니다. |