Your cart is empty
Explore our products and add items to your cart
import { EmptyState, VStack } from "@chakra-ui/react"
import { LuShoppingCart } from "react-icons/lu"
const Demo = () => {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<LuShoppingCart />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>Your cart is empty</EmptyState.Title>
<EmptyState.Description>
Explore our products and add items to your cart
</EmptyState.Description>
</VStack>
</EmptyState.Content>
</EmptyState.Root>
)
}
用法
¥Usage
import { EmptyState } from "@chakra-ui/react"
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator />
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Content>
</EmptyState.Root>
如果你更喜欢封闭的组件组合,请查看 以下代码片段。
¥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
import { EmptyState, For, Stack, VStack } from "@chakra-ui/react"
import { LuShoppingCart } from "react-icons/lu"
const Demo = () => {
return (
<Stack>
<For each={["sm", "md", "lg"]}>
{(size) => (
<EmptyState.Root size={size} key={size}>
<EmptyState.Content>
<EmptyState.Indicator>
<LuShoppingCart />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>Your cart is empty</EmptyState.Title>
<EmptyState.Description>
Explore our products and add items to your cart
</EmptyState.Description>
</VStack>
</EmptyState.Content>
</EmptyState.Root>
)}
</For>
</Stack>
)
}
操作
¥Action
以下是带有操作按钮的空状态的示例。
¥Here's an example of an empty state with an action button.
Start adding tokens
Add a new design token to get started
import { Button, ButtonGroup, EmptyState, VStack } from "@chakra-ui/react"
import { HiColorSwatch } from "react-icons/hi"
const Demo = () => {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<HiColorSwatch />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>Start adding tokens</EmptyState.Title>
<EmptyState.Description>
Add a new design token to get started
</EmptyState.Description>
</VStack>
<ButtonGroup>
<Button>Create token</Button>
<Button variant="outline">Import</Button>
</ButtonGroup>
</EmptyState.Content>
</EmptyState.Root>
)
}
列表
¥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
import { EmptyState, List, VStack } from "@chakra-ui/react"
import { HiColorSwatch } from "react-icons/hi"
const Demo = () => {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<HiColorSwatch />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>No results found</EmptyState.Title>
<EmptyState.Description>
Try adjusting your search
</EmptyState.Description>
</VStack>
<List.Root variant="marker">
<List.Item>Try removing filters</List.Item>
<List.Item>Try different keywords</List.Item>
</List.Root>
</EmptyState.Content>
</EmptyState.Root>
)
}
已关闭组件
¥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
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.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. |