- New Users
- 234
- Sales
- £12,340
- Revenue
- 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>
)
}
用法
¥Usage
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>
如果你更喜欢封闭的组件组合,请查看 以下代码片段。
¥If you prefer a closed component composition, check out the snippet below.
示例
¥Examples
尺寸
¥Sizes
使用 size
属性更改数据列表组件的大小。
¥Use the size
prop to change the size of the datalist component.
- Name
- John Doe
- Name
- John Doe
- Name
- 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>
)
}
变量
¥Variants
使用 variant
属性更改数据列表组件的变体。
¥Use the variant
prop to change the variant of the datalist component.
添加到 v3.1.x
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
- New Users
- 234
- Sales
- £12,340
- Revenue
- 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
使用 orientation
属性更改数据列表组件的方向。
¥Use the orientation
prop to change the orientation of the datalist component.
- New Users
- 234
- Sales
- £12,340
- Revenue
- 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>
)
}
信息提示
¥Info Tip
在 DataList.Item
中渲染 InfoTip
组件,为数据列表提供更多上下文。
¥Render the InfoTip
component within DataList.Item
to provide additional
context to the datalist.
- New UsersThis is some info
- 234
- SalesThis is some info
- £12,340
- RevenueThis is some info
- 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>
)
}
分隔符
¥Separator
使用 DataList.Root
上的 divideY
属性在项目之间添加分隔符。
¥Use the divideY
prop on the DataList.Root
to add a separator between items.
- First Name
- Jassie
- Last Name
- Bhatia
- jassie@jassie.dev
- Phone
- 1234567890
- Address
- 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" },
]
已关闭组件
¥Closed Component
以下是如何设置封闭组件组合的数据列表。
¥Here's how to setup the Data List for a closed component composition.
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>
)
},
)
如果你想自动将封闭式组件添加到项目中,请运行以下命令:
¥If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add data-list
属性
¥Props
根元素
¥Root
Prop | Default | Type |
---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' The color palette of the component |
orientation | 'vertical' | 'horizontal' | 'vertical' The orientation of the component |
size | 'md' | 'sm' | 'md' | 'lg' The size of the component |
variant | 'subtle' | 'subtle' | 'bold' The variant 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. |