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 BlazorIgbCircularProgress
a SVG stop element would be created. The values passed ascolor
,offset
andopacity
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 요소입니다. |
그래디언트_시작 | 진행 선형 그라데이션 시작 색상입니다. |
그래디언트_엔드 | 진행 선형 그라데이션 끝 색상입니다. |
길 | 진행률 링의 트랙 영역입니다. |
채우다 | 진행률 표시기 영역입니다. |
상표 | 진행률 레이블입니다. |
값 | 진행률 레이블 값입니다. |
불확정 | 진행 불확정 상태입니다. |
주요한 | 진행률 표시기 기본 상태입니다. |
위험 | 진행률 표시기 오류 상태입니다. |
경고 | 진행률 표시기 경고 상태입니다. |
정보 | 진행률 표시기 정보 상태입니다. |
성공 | 진행률 표시기 성공 상태입니다. |