Skip to Content
文档

DataList

用于显示类似数据项列表。

SourceStorybookRecipe
New Users
234
Sales
£12,340
Revenue
3,450

用法

¥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>
info

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

¥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

变量

¥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

方向

¥Orientation

使用 orientation 属性更改数据列表组件的方向。

¥Use the orientation prop to change the orientation of the datalist component.

New Users
234
Sales
£12,340
Revenue
3,450

信息提示

¥Info Tip

DataList.Item 中渲染 InfoTip 组件,为数据列表提供更多上下文。

¥Render the InfoTip component within DataList.Item to provide additional context to the datalist.

New Users
234
Sales
£12,340
Revenue
3,450

分隔符

¥Separator

使用 DataList.Root 上的 divideY 属性在项目之间添加分隔符。

¥Use the divideY prop on the DataList.Root to add a separator between items.

First Name
Jassie
Last Name
Bhatia
Email
jassie@jassie.dev
Phone
1234567890
Address
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

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

Previous

图片

Next

图标