import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
用法
¥Usage
import { ProgressCircle } from "@chakra-ui/react"<ProgressCircle.Root>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<ProgressCircle.ValueText />
</ProgressCircle.Root>示例
¥Examples
圆角
¥Rounded
使用 ProgressCircle.Range 上的 strokeLinecap 属性使进度圈的两端变为圆角。
¥Use the strokeLinecap prop on ProgressCircle.Range to make the ends of the
progress circle rounded.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
尺寸
¥Sizes
使用 size 属性更改进度圈组件的大小。
¥Use the size prop to change the size of the progress circle component.
import { For, HStack, ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="10">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<ProgressCircle.Root key={size} size={size} value={30}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)}
</For>
</HStack>
)
}
颜色
¥Colors
使用 colorPalette 属性更改组件的配色方案。
¥Use the colorPalette prop to change the color scheme of the component.
gray
red
green
blue
teal
pink
purple
cyan
orange
yellow
import { HStack, ProgressCircle, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="4" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<ProgressCircle.Root size="sm" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="md" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="lg" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</HStack>
))}
</Stack>
)
}
值文本
¥Value Text
渲染 ProgressCircle.ValueText 组件以显示进度值。
¥Render the ProgressCircle.ValueText component to display the progress value.
import { AbsoluteCenter, For, HStack, ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="8">
<For each={["md", "lg", "xl"]}>
{(size) => (
<ProgressCircle.Root size={size} key={size} value={5}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<AbsoluteCenter>
<ProgressCircle.ValueText />
</AbsoluteCenter>
</ProgressCircle.Root>
)}
</For>
</HStack>
)
}
自定义粗细
¥Custom Thickness
将 --thickness CSS 变量传递给 ProgressCircleRing 组件，以更改圆环的粗细。
¥Pass the --thickness css variable to the ProgressCircleRing component to
change the thickness of the ring.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle css={{ "--thickness": "2px" }}>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
不确定
¥Indeterminate
将 value 属性设置为 null 可渲染不确定状态。
¥Set the value prop to null to render the indeterminate state.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={null} size="sm">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
颜色
¥Color
将 stroke 属性传递给 ProgressCircle.Range 组件，即可更改范围的颜色。
¥Pass the stroke prop to the ProgressCircle.Range component to change the
color of the range.
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range stroke="orange" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
已关闭组件
¥Closed Component
以下是如何使用 ProgressCircle 组件创建封闭组件。
¥Here's how to create a closed component using the ProgressCircle component.
import type { SystemStyleObject } from "@chakra-ui/react"
import {
AbsoluteCenter,
ProgressCircle as ChakraProgressCircle,
} from "@chakra-ui/react"
import * as React from "react"
interface ProgressCircleProps extends ChakraProgressCircle.RootProps {
showValueText?: boolean
valueText?: React.ReactNode
trackColor?: SystemStyleObject["stroke"]
cap?: SystemStyleObject["strokeLinecap"]
thickness?: SystemStyleObject["strokeWidth"]
}
export const ProgressCircle = React.forwardRef<
HTMLDivElement,
ProgressCircleProps
>(function ProgressCircle(props, ref) {
const {
showValueText,
valueText,
trackColor,
color,
cap,
thickness,
...rest
} = props
return (
<ChakraProgressCircle.Root {...rest} ref={ref}>
<ChakraProgressCircle.Circle css={{ "--thickness": thickness }}>
<ChakraProgressCircle.Track stroke={trackColor} />
<ChakraProgressCircle.Range stroke={color} strokeLinecap={cap} />
</ChakraProgressCircle.Circle>
{showValueText && (
<AbsoluteCenter>
<ChakraProgressCircle.ValueText>
{valueText}
</ChakraProgressCircle.ValueText>
</AbsoluteCenter>
)}
</ChakraProgressCircle.Root>
)
})
属性
¥Props
根元素
¥Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |