Component

Progress

완료 비율을 아는 작업의 현재 위치를 표시합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

같은 size의 입력 필드에 맞춘 진행 막대 두께

완료 값

progress의 접근 가능한 이름

완료 전체 값

value를 null로 보내 진행률 미상 표시

Code

import { Progress } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Progress size={"md"} label={"업로드 진행률"} max={100} value={64} valueLabel={`${Math.round((64 / 100) * 100)}% 완료`}/>))
}

Props

@amineslab/ui에서 Progress를 가져옵니다.

import { Progress } from '@amineslab/ui'

`Progress`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`label`	`string`	-	progress의 접근 가능한 이름입니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	progress bar의 높이입니다.
`value`	`number \| null`	-	완료 비율입니다. 생략하거나 null이면 indeterminate입니다.
`valueLabel`	`ReactNode`	-	사람에게 보여 줄 현재 값입니다.
`max`	`number`	`100`	완료 전체 값입니다.
`indicatorClassName`	`string`	-	indicator에 추가할 기존 호환 클래스입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Indeterminate

검사 준비 중

import { Progress } from '@amineslab/ui'

export default function ExamplePreview() {
  return (<Progress label="파일 검사" value={null} valueLabel="검사 준비 중"/>)
}

사용 기준

권장하는 사용

완료 수치와 작업 이름을 함께 표시합니다.

피해야 할 사용

겉모양만으로 사용을 결정하지 마세요.
의미와 키보드 동작, 모바일에서의 흐름을 함께 확인하세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.