Skip to Content
文档

进度

用于显示任务的进度状态。

SourceStorybookRecipeArk

用法

¥Usage

import { Progress } from "@chakra-ui/react"
<Progress.Root>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Label />
  <Progress.ValueText />
</Progress.Root>

示例

¥Examples

尺寸

¥Sizes

使用 size 属性更改进度条的大小。

¥Use the size prop to change the size of the progress bar.

变量

¥Variants

使用 variant 属性更改进度条的视觉样式。

¥Use the variant prop to change the visual style of the progress bar.

颜色

¥Colors

使用 colorPalette 属性更改进度条的颜色。

¥Use the colorPalette prop to change the color of the progress bar.

gray

red

green

blue

teal

pink

purple

cyan

orange

yellow

内联标签

¥Inline Label

组合 Progress.LabelProgress.ValueText 组件,为进度条创建内联标签。

¥Compose the Progress.Label and Progress.ValueText components to create an inline label for the progress bar.

40%

信息提示

¥Info tip

使用 info 属性为进度条添加工具提示。

¥Use the info prop to add a tooltip to the progress bar.

不确定

¥Indeterminate

将值设置为 null 可显示不确定的进度条。

¥Set the value to null to show an indeterminate progress bar.

条纹

¥Stripes

striped 属性设置为 true,以向进度条添加条纹。

¥Set the striped prop to true to add stripes to the progress bar.

动画条纹

¥Animated Stripes

animated 属性设置为 true,以设置条纹动画。

¥Set the animated prop to true to animate the stripes.

已关闭组件

¥Closed Component

以下是如何使用 Progress 组件创建封闭组件。

¥Here's how to create a closed component using the Progress component.

import { Progress as ChakraProgress } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
import * as React from "react"

interface ProgressProps extends ChakraProgress.RootProps {
  showValueText?: boolean
  valueText?: React.ReactNode
  label?: React.ReactNode
  info?: React.ReactNode
}

export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
  function Progress(props, ref) {
    const { showValueText, valueText, label, info, ...rest } = props
    return (
      <ChakraProgress.Root {...rest} ref={ref}>
        {label && (
          <ChakraProgress.Label>
            {label} {info && <InfoTip>{info}</InfoTip>}
          </ChakraProgress.Label>
        )}
        <ChakraProgress.Track>
          <ChakraProgress.Range />
        </ChakraProgress.Track>
        {showValueText && (
          <ChakraProgress.ValueText>{valueText}</ChakraProgress.ValueText>
        )}
      </ChakraProgress.Root>
    )
  },
)

属性

¥Props

根元素

¥Root

PropDefaultType
defaultValue '50'
number

The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.

formatOptions '{ style: \'percent\' }'
NumberFormatOptions

The options to use for formatting the value.

locale '\'en-US\''
string

The locale to use for formatting the value.

max '100'
number

The maximum allowed value of the progress bar.

min '0'
number

The minimum allowed value of the progress bar.

orientation '\'horizontal\''
'horizontal' | 'vertical'

The orientation of the element.

colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'

The color palette of the component

variant 'outline'
'outline' | 'subtle'

The variant of the component

shape 'rounded'
'square' | 'rounded' | 'full'

The shape of the component

size 'md'
'xs' | 'sm' | 'md' | 'lg' | 'xl'

The size of the component

as
React.ElementType

The underlying element to render.

asChild
boolean

Use the provided child element as the default rendered element, combining their props and behavior.

For more details, read our Composition guide.
unstyled
boolean

Whether to remove the component's style.

id
string

The unique identifier of the machine.

ids
Partial<{ root: string; track: string; label: string; circle: string }>

The ids of the elements in the progress bar. Useful for composition.

onValueChange
(details: ValueChangeDetails) => void

Callback fired when the value changes.

translations
IntlTranslations

The localized messages to use.

value
number

The controlled value of the progress bar.

striped
'true' | 'false'

The striped of the component

animated
'true' | 'false'

The animated of the component

Previous

进度圈

Next

骨架