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>
)
}
用法
import { Status } from "@chakra-ui/react"<Status.Root>
<Status.Indicator />
</Status.Root>信息
如果您喜欢封闭的组件组合方式，请查看下面的代码片段。示例
标签
在 Status.Root 组件中渲染标签。
错误
信息
警告
成功
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>
)
}
尺寸
使用 size 属性来改变状态组件的尺寸。
审核中
错误
已批准
审核中
错误
已批准
审核中
错误
已批准
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>
)
}
封闭组件
以下是如何为封闭组件组合设置 Status。
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>
)
},
)
如果您想自动将封闭组件添加到您的项目中，请运行此命令
npx @chakra-ui/cli snippet add status属性
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
size | 'md' | 'sm' | 'md' | 'lg'组件的尺寸 |