Progressstandard
작업의 진행 정도를 막대로 보여 주는 진행률 표시(progress)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `Progress` 위에 서 있습니다. 값이 없으면 얼마나 걸릴지 모르는 상태(불확정)로 그립니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/progressDefault
progress-example.tsx
"use client"
import * as React from "react"
import { Example, ExampleWrapper,} from "@/components/example"import { Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle,} from "@/components/ui/item"import { Progress, ProgressLabel, ProgressValue,} from "@/components/ui/progress"import { Slider } from "@/components/ui/slider"import { FileIcon } from "lucide-react"
export default function ProgressExample() { return ( <ExampleWrapper> <ProgressValues /> <ProgressWithLabel /> <ProgressControlled /> <FileUploadList /> </ExampleWrapper> )}
function ProgressValues() { return ( <Example title="Progress Bar"> <div className="flex w-full flex-col gap-4"> <Progress aria-label="Progress" value={0} /> <Progress aria-label="Progress" value={25} className="w-full" /> <Progress aria-label="Progress" value={50} /> <Progress aria-label="Progress" value={75} /> <Progress aria-label="Progress" value={100} /> </div> </Example> )}
function ProgressWithLabel() { return ( <Example title="With Label"> <Progress aria-label="Progress" value={56}> <ProgressLabel>Upload progress</ProgressLabel> <ProgressValue /> </Progress> </Example> )}
function ProgressControlled() { const [value, setValue] = React.useState(50)
return ( <Example title="Controlled"> <div className="flex w-full flex-col gap-4"> <Progress aria-label="Progress" value={value} className="w-full" /> <Slider aria-label="Progress" value={value} onValueChange={(value) => setValue(value as number)} min={0} max={100} step={1} /> </div> </Example> )}
function FileUploadList() { const files = React.useMemo( () => [ { id: "1", name: "document.pdf", progress: 45, timeRemaining: "2m 30s", }, { id: "2", name: "presentation.pptx", progress: 78, timeRemaining: "45s", }, { id: "3", name: "spreadsheet.xlsx", progress: 12, timeRemaining: "5m 12s", }, { id: "4", name: "image.jpg", progress: 100, timeRemaining: "Complete", }, ], [] )
return ( <Example title="File Upload List"> <ItemGroup> {files.map((file) => ( <Item key={file.id} size="xs" className="px-0"> <ItemMedia variant="icon"> <FileIcon className="size-5" /> </ItemMedia> <ItemContent className="inline-block truncate"> <ItemTitle className="inline">{file.name}</ItemTitle> </ItemContent> <ItemContent> <Progress aria-label="Progress" value={file.progress} className="w-32" /> </ItemContent> <ItemActions className="w-16 justify-end"> <span className="text-sm text-muted-foreground"> {file.timeRemaining} </span> </ItemActions> </Item> ))} </ItemGroup> </Example> )}