Skip to Content
文档

空状态

用于指示资源何时为空或不可用。

SourceStorybookRecipe

Your cart is empty

Explore our products and add items to your cart

用法

¥Usage

import { EmptyState } from "@chakra-ui/react"
<EmptyState.Root>
  <EmptyState.Content>
    <EmptyState.Indicator />
    <EmptyState.Title />
    <EmptyState.Description />
  </EmptyState.Content>
</EmptyState.Root>
info

如果你更喜欢封闭的组件组合,请查看 以下代码片段

¥If you prefer a closed component composition, check out the snippet below.

示例

¥Examples

尺寸

¥Sizes

使用 size 属性设置空状态的大小。

¥Use the size prop to set the size of the Empty state.

Your cart is empty

Explore our products and add items to your cart

Your cart is empty

Explore our products and add items to your cart

Your cart is empty

Explore our products and add items to your cart

操作

¥Action

以下是带有操作按钮的空状态的示例。

¥Here's an example of an empty state with an action button.

Start adding tokens

Add a new design token to get started

列表

¥List

以下是带有列表的空状态的示例。

¥Here's an example of an empty state with a list.

No results found

Try adjusting your search

  • Try removing filters
  • Try different keywords

已关闭组件

¥Closed Component

以下是如何设置封闭组件组合的空状态。

¥Here's how to setup the Empty State for a closed component composition.

import { EmptyState as ChakraEmptyState, VStack } from "@chakra-ui/react"
import * as React from "react"

export interface EmptyStateProps extends ChakraEmptyState.RootProps {
  title: string
  description?: string
  icon?: React.ReactNode
}

export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
  function EmptyState(props, ref) {
    const { title, description, icon, children, ...rest } = props
    return (
      <ChakraEmptyState.Root ref={ref} {...rest}>
        <ChakraEmptyState.Content>
          {icon && (
            <ChakraEmptyState.Indicator>{icon}</ChakraEmptyState.Indicator>
          )}
          {description ? (
            <VStack textAlign="center">
              <ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
              <ChakraEmptyState.Description>
                {description}
              </ChakraEmptyState.Description>
            </VStack>
          ) : (
            <ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
          )}
          {children}
        </ChakraEmptyState.Content>
      </ChakraEmptyState.Root>
    )
  },
)

如果你想自动将封闭式组件添加到项目中,请运行以下命令:

¥If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add empty-state

属性

¥Props

根元素

¥Root

PropDefaultType
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.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.

Previous

警报

Next

进度圈