Progress

진행률 표시 컴포넌트

Progress#

작업 진행률을 시각적으로 표시하는 컴포넌트입니다. 직선형과 원형을 지원합니다.

사용법#

// 직선형 진행률 바
CouiProgress(
  value: 0.7,
)

// 라벨 포함
CouiProgress(
  value: uploadProgress,
  label: '${(uploadProgress * 100).toInt()}%',
)

// 원형 진행률
CouiRadialProgress(
  value: 0.65,
)

// 불확정 진행률 (로딩)
CouiProgress.indeterminate()

Progress(value: 0.7)

Progress(
  value: uploadProgress,
  label: '${(uploadProgress * 100).toInt()}%',
)

RadialProgress(value: 0.65)

Progress.indeterminate()

Props / Parameters#

속성	타입	기본값	설명
`value`	`double?`	`null`	진행률 (0.0 ~ 1.0). null이면 불확정
`label`	`String?`	`null`	진행률 라벨
`variant`	`ProgressVariant`	`default`	색상 변형
`size`	`ProgressSize`	`md`	크기
`showLabel`	`bool`	`false`	퍼센트 라벨 표시

변형 (Variants)#

색상#

CouiProgress(value: 0.5, variant: ProgressVariant.primary)
CouiProgress(value: 0.5, variant: ProgressVariant.success)
CouiProgress(value: 0.5, variant: ProgressVariant.warning)
CouiProgress(value: 0.5, variant: ProgressVariant.error)

원형 진행률#

CouiRadialProgress(
  value: 0.75,
  size: RadialProgressSize.lg,
  showLabel: true,
  child: Text('75%'),
)

다단계 진행률#

CouiProgress.multi(
  segments: [
    ProgressSegment(value: 0.3, variant: ProgressVariant.success),
    ProgressSegment(value: 0.2, variant: ProgressVariant.warning),
    ProgressSegment(value: 0.1, variant: ProgressVariant.error),
  ],
)