您的购物车为空
浏览我们的产品并添加商品到您的购物车
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>
)
}
用法
import { EmptyState } from "@chakra-ui/react"<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator />
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Content>
</EmptyState.Root>信息
如果您倾向于封闭组件组合，请查看下面的代码片段。示例
尺寸
使用 size 属性设置空状态的尺寸。
您的购物车为空
浏览我们的产品并添加商品到您的购物车
您的购物车为空
浏览我们的产品并添加商品到您的购物车
您的购物车为空
浏览我们的产品并添加商品到您的购物车
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>
)
}
操作
这是一个带有操作按钮的空状态示例。
开始添加令牌
添加一个新的设计令牌以开始
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>
)
}
列表
这是一个带有列表的空状态示例。
未找到结果
尝试调整您的搜索
- 尝试移除筛选器
- 尝试不同的关键词
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>
)
}
封闭组件
以下是如何为封闭组件组合设置空状态。
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>
)
},
)
如果您想自动将封闭组件添加到您的项目中，请运行此命令
npx @chakra-ui/cli snippet add empty-state属性
根
| 属性 | 默认 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
size | 'md' | 'sm' | 'md' | 'lg'组件的尺寸 |