- 新用户
- 234
- 销售额
- £12,340
- 营收
- 3,450
import { DataList } from "@chakra-ui/react"
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
const Demo = () => {
return (
<DataList.Root orientation="horizontal">
{stats.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
)
}
使用情况
import { DataList } from "@chakra-ui/react"<DataList.Root>
{data.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>信息
如果您喜欢封闭式组件组合，请查看下方代码片段。示例
尺寸
使用 size 属性来改变数据列表组件的尺寸。
- 姓名
- John Doe
- 姓名
- John Doe
- 姓名
- John Doe
import { DataList, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4">
<DataList.Root size="sm">
<DataList.Item>
<DataList.ItemLabel>Name</DataList.ItemLabel>
<DataList.ItemValue>John Doe</DataList.ItemValue>
</DataList.Item>
</DataList.Root>
<DataList.Root size="md">
<DataList.Item>
<DataList.ItemLabel>Name</DataList.ItemLabel>
<DataList.ItemValue>John Doe</DataList.ItemValue>
</DataList.Item>
</DataList.Root>
<DataList.Root size="lg">
<DataList.Item>
<DataList.ItemLabel>Name</DataList.ItemLabel>
<DataList.ItemValue>John Doe</DataList.ItemValue>
</DataList.Item>
</DataList.Root>
</Stack>
)
}
变体
使用 variant 属性来改变数据列表组件的变体。
添加于 v3.1.x
- 新用户
- 234
- 销售额
- £12,340
- 营收
- 3,450
- 新用户
- 234
- 销售额
- £12,340
- 营收
- 3,450
import { DataList, For, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="8">
<For each={["subtle", "bold"]}>
{(variant) => (
<DataList.Root variant={variant} key={variant}>
{stats.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
)}
</For>
</Stack>
)
}
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
方向
使用 orientation 属性来改变数据列表组件的方向。
- 新用户
- 234
- 销售额
- £12,340
- 营收
- 3,450
import { DataList } from "@chakra-ui/react"
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
const Demo = () => {
return (
<DataList.Root>
{stats.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
)
}
信息提示
在 DataList.Item 中渲染 InfoTip 组件，为数据列表提供额外上下文。
- 新用户这是一些信息
- 234
- 销售额这是一些信息
- £12,340
- 营收这是一些信息
- 3,450
import { DataList } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
const stats = [
{ label: "New Users", value: "234", diff: -12, helpText: "Till date" },
{ label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" },
{ label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" },
]
const Demo = () => {
return (
<DataList.Root orientation="horizontal">
{stats.map((item) => (
<DataList.Item key={item.label}>
<DataList.ItemLabel>
{item.label}
<InfoTip>This is some info</InfoTip>
</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
)
}
分隔符
在 DataList.Root 上使用 divideY 属性可在项目之间添加分隔符。
- 名
- Jassie
- 姓
- Bhatia
- 电子邮件
- jassie@jassie.dev
- 电话
- 1234567890
- 地址
- 1234 Main St, Anytown, USA
import { DataList } from "@chakra-ui/react"
const Demo = () => {
return (
<DataList.Root orientation="horizontal" divideY="1px" maxW="md">
{items.map((item) => (
<DataList.Item key={item.label} pt="4">
<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
<DataList.ItemValue>{item.value}</DataList.ItemValue>
</DataList.Item>
))}
</DataList.Root>
)
}
const items = [
{ label: "First Name", value: "Jassie" },
{ label: "Last Name", value: "Bhatia" },
{ label: "Email", value: "jassie@jassie.dev" },
{ label: "Phone", value: "1234567890" },
{ label: "Address", value: "1234 Main St, Anytown, USA" },
]
封闭式组件
以下是如何为封闭式组件组合设置数据列表。
import { DataList as ChakraDataList } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
import * as React from "react"
export const DataListRoot = ChakraDataList.Root
interface ItemProps extends ChakraDataList.ItemProps {
label: React.ReactNode
value: React.ReactNode
info?: React.ReactNode
grow?: boolean
}
export const DataListItem = React.forwardRef<HTMLDivElement, ItemProps>(
function DataListItem(props, ref) {
const { label, info, value, children, grow, ...rest } = props
return (
<ChakraDataList.Item ref={ref} {...rest}>
<ChakraDataList.ItemLabel flex={grow ? "1" : undefined}>
{label}
{info && <InfoTip>{info}</InfoTip>}
</ChakraDataList.ItemLabel>
<ChakraDataList.ItemValue flex={grow ? "1" : undefined}>
{value}
</ChakraDataList.ItemValue>
{children}
</ChakraDataList.Item>
)
},
)
如果您想自动将封闭式组件添加到您的项目，请运行以下命令：
npx @chakra-ui/cli snippet add data-list属性
根组件
| 属性 | 默认值 | 类型 |
|---|---|---|
调色板 | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的调色板 |
方向 | 'vertical' | 'horizontal' | 'vertical'组件的方向 |
尺寸 | 'md' | 'sm' | 'md' | 'lg'组件的尺寸 |
变体 | 'subtle' | 'subtle' | 'bold'组件的变体 |