Progress 진행률 표시줄
LhProgress는 작업이나 용량의 완료 진행을 표시하는 데 사용되며, 선형과 원형 두 가지 형태를 지원하고 색상과 텍스트를 커스터마이징할 수 있습니다.
기본 사용법
선형 진행률 표시줄
60%
vue
<script setup lang="ts">
</script>
<template>
<LhProgress :percentage="60" />
</template>vue
<script>
export default {}
</script>
<template>
<LhProgress :percentage="60" />
</template>상태
normal / success / warning / exception, 100에 도달하면 자동으로 success
100%
80%
40%
vue
<script setup lang="ts">
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px">
<LhProgress :percentage="100" />
<LhProgress :percentage="80" status="warning" />
<LhProgress :percentage="40" status="exception" />
</div>
</template>vue
<script>
export default {}
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px">
<LhProgress :percentage="100" />
<LhProgress :percentage="80" status="warning" />
<LhProgress :percentage="40" status="exception" />
</div>
</template>커스텀 색상과 텍스트
color는 문자열과 함수를 지원, format로 문구 커스터마이징
55%
70 점
vue
<script setup lang="ts">
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px">
<LhProgress :percentage="55" color="#B8860B" />
<LhProgress
:percentage="70"
:color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
:format="(p: number) => `${p} 점`"
/>
</div>
</template>vue
<script>
export default {}
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px">
<LhProgress :percentage="55" color="#B8860B" />
<LhProgress
:percentage="70"
:color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
:format="(p: number) => `${p} 점`"
/>
</div>
</template>원형 진행률
type을 circle로 설정
75%
100%
vue
<script setup lang="ts">
</script>
<template>
<div style="display: flex; align-items: center; gap: 24px">
<LhProgress type="circle" :percentage="75" />
<LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
</div>
</template>vue
<script>
export default {}
</script>
<template>
<div style="display: flex; align-items: center; gap: 24px">
<LhProgress type="circle" :percentage="75" />
<LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
</div>
</template>텍스트 숨기기
showText를 false로 설정
vue
<script setup lang="ts">
</script>
<template>
<LhProgress :percentage="45" :show-text="false" />
</template>vue
<script>
export default {}
</script>
<template>
<LhProgress :percentage="45" :show-text="false" />
</template>API
Props
| 프로퍼티 | 설명 | 타입 | 기본값 |
|---|---|---|---|
| percentage | 진행률 백분율, [0, 100]을 벗어나면 자동으로 클램프 | number | 0 |
| type | 형태 | "line" | "circle" | 'line' |
| status | 상태, normal일 때 100에 도달하면 자동으로 success로 전환 | "normal" | "success" | "warning" | "exception" | 'normal' |
| color | 진행률 표시줄 색상: 문자열 또는 백분율을 받아 색상을 반환하는 함수 | string | ((percentage: number) => string) | — |
| strokeWidth | 선 너비 px(line은 높이, circle은 테두리 두께) | number | 6 |
| width | 원형 모드 캔버스 너비 px | number | 126 |
| showText | 텍스트 표시 여부 | boolean | true |
| format | 커스텀 텍스트 포맷 | (percentage: number) => string | — |
| sx | sx 빠른 레이아웃 속성 | LhSxProps | — |
Slots
| 슬롯 | 설명 | 범위 |
|---|---|---|
| text | 커스텀 텍스트 콘텐츠 | { percentage } |
접근성
- 루트 요소에
role="progressbar"와aria-valuemin/aria-valuemax/aria-valuenow가 있으며 WAI-ARIA progressbar 패턴에 맞춥니다 aria-valuetext가 보이는 문구와 동기화됩니다: 기본값은 백분율이며,format을 넘기면 포맷된 텍스트가 읽힙니다(예: '42 점')- 클램프된 값이
aria-valuenow에 동기화되어 범위를 벗어난 값이 읽히지 않습니다
타입 정의
이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/progress/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):
LhProgressProps
ts
export interface LhProgressProps {
/** 진행률 백분율 0-100(벗어나면 자동으로 클램프) */
percentage: number
type?: LhProgressType
status?: LhProgressStatus
/** 진행률 표시줄 색상: 문자열 또는 백분율을 받아 색상을 반환하는 함수 */
color?: string | ((percentage: number) => string)
/** 선 너비 px(line은 높이, circle은 테두리 두께) */
strokeWidth?: number
/** 원형 모드 캔버스 너비 px */
width?: number
showText?: boolean
/** 커스텀 텍스트 포맷 */
format?: (percentage: number) => string
/** 빠른 레이아웃 속성 */
sx?: LhSxProps
}LhProgressType (출처: @lh-ui/share/core/progress)
ts
export type LhProgressType = 'line' | 'circle'LhProgressStatus (출처: @lh-ui/share/core/progress)
ts
export type LhProgressStatus = 'normal' | 'success' | 'warning' | 'exception'