import { HStack, Status } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="6">
<Status.Root colorPalette="red">
<Status.Indicator />
</Status.Root>
<Status.Root colorPalette="blue">
<Status.Indicator />
</Status.Root>
<Status.Root colorPalette="orange">
<Status.Indicator />
</Status.Root>
<Status.Root colorPalette="green">
<Status.Indicator />
</Status.Root>
</HStack>
)
}
用法
¥Usage
import { Status } from "@chakra-ui/react"<Status.Root>
<Status.Indicator />
</Status.Root>info
如果你更喜欢封闭的组件组合，请查看 以下代码片段。
¥If you prefer a closed component composition, check out the snippet below.
示例
¥Examples
标签
¥Label
在 Status.Root 组件中渲染标签。
¥Render the label within the Status.Root component.
Error
Info
Warning
Success
import { HStack, Status } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="6">
<Status.Root colorPalette="red">
<Status.Indicator />
Error
</Status.Root>
<Status.Root colorPalette="blue">
<Status.Indicator />
Info
</Status.Root>
<Status.Root colorPalette="orange">
<Status.Indicator />
Warning
</Status.Root>
<Status.Root colorPalette="green">
<Status.Indicator />
Success
</Status.Root>
</HStack>
)
}
尺寸
¥Sizes
使用 size 属性更改状态组件的大小。
¥Use the size prop to change the size of the status component.
In Review
Error
Approved
In Review
Error
Approved
In Review
Error
Approved
import { For, HStack, Stack, Status } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
<For each={["sm", "md", "lg"]}>
{(size) => (
<HStack key={size} gap="10" px="4">
<Status.Root size={size} width="100px" colorPalette="orange">
<Status.Indicator />
In Review
</Status.Root>
<Status.Root size={size} width="100px" colorPalette="red">
<Status.Indicator />
Error
</Status.Root>
<Status.Root size={size} width="100px" colorPalette="green">
<Status.Indicator />
Approved
</Status.Root>
</HStack>
)}
</For>
</Stack>
)
}
已关闭组件
¥Closed Component
以下是如何设置封闭组件组合的状态。
¥Here's how to setup the Status for a closed component composition.
import type { ColorPalette } from "@chakra-ui/react"
import { Status as ChakraStatus } from "@chakra-ui/react"
import * as React from "react"
type StatusValue = "success" | "error" | "warning" | "info"
export interface StatusProps extends ChakraStatus.RootProps {
value?: StatusValue
}
const statusMap: Record<StatusValue, ColorPalette> = {
success: "green",
error: "red",
warning: "orange",
info: "blue",
}
export const Status = React.forwardRef<HTMLDivElement, StatusProps>(
function Status(props, ref) {
const { children, value = "info", ...rest } = props
const colorPalette = rest.colorPalette ?? statusMap[value]
return (
<ChakraStatus.Root ref={ref} {...rest} colorPalette={colorPalette}>
<ChakraStatus.Indicator />
{children}
</ChakraStatus.Root>
)
},
)
如果你想自动将封闭式组件添加到项目中，请运行以下命令：
¥If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add status属性
¥Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
size | 'md' | 'sm' | 'md' | 'lg'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. |