Progress
완료 비율을 나타내는 시각적 바.
Overview
Machine-readable contract from Component Spec.
component: progressexport: Progressversion: 1attributes: data-refineui=progress
Anatomy
| Part | data-refineui |
|---|---|
| root | progress |
Variants
| Axis | Values |
|---|---|
| size | sm, lg |
Accessibility
| Slot | Element | Role |
|---|---|---|
| progress | div | progressbar |
Layout
| Property | Value |
|---|---|
| direction | logical |
| rtl | true |
npm install @refineui/react @refineui/tokensyarn add @refineui/react @refineui/tokenspnpm add @refineui/react @refineui/tokensbun add @refineui/react @refineui/tokens사용법
섹션 제목: “사용법”import { Progress } from "@refineui/react";
<Progress value={60} max={100} size="lg" />
<Progress value={uploadedBytes} max={totalBytes} />API 레퍼런스
섹션 제목: “API 레퍼런스”| Prop | Default | Type | Description |
|---|---|---|---|
| value | — | number | 현재 진행 값(필수). |
| max | 100 | number | 최댓값. |
| size | — | "sm" | "lg" | 바 두께: Small(2px) 또는 Large(4px). |