# 数据列表

以键值对的形式显示元数据列表。

```jsx
<DataList.Root>
  <DataList.Item align="center">
    <DataList.Label minWidth="88px">状态</DataList.Label>

    <DataList.Value>
      <Badge color="jade" variant="soft" radius="full">
        已授权
      </Badge>
    </DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">ID</DataList.Label>

    <DataList.Value>
      <Flex align="center" gap="2">
        <Code variant="ghost">u_2J89JSA4GJ</Code>

        <IconButton size="1" aria-label="复制值" color="gray" variant="ghost">
          <CopyIcon />
        </IconButton>
      </Flex>
    </DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">姓名</DataList.Label>

    <DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">邮箱</DataList.Label>

    <DataList.Value>
      <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
    </DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">公司</DataList.Label>

    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>
```

## [API 参考](#api-参考)

该组件基于 `dl` 元素，并支持 [常见边距属性](/themes/docs/overview/layout#margin-props)。

### [根节点](#根节点)

包含数据列表的所有部分。

| Prop          | Type                                                 | Default          |
| ------------- | ---------------------------------------------------- | ---------------- |
| `orientation` | `Responsive<"horizontal" \| "vertical">`             | `"horizontal"`   |
| `size`        | `Responsive<"1" \| "2" \| "3">`                      | `"2"`            |
| `trim`        | `Responsive<"normal" \| "start" \| "end" \| "both">` | No default value |

### [项](#项)

包裹一个键值对。

| Prop    | Type               | Default          |
| ------- | ------------------ | ---------------- |
| `align` | `Responsive<enum>` | No default value |

### [标签](#标签)

包含键值对中的键。

| Prop           | Type                 | Default          |
| -------------- | -------------------- | ---------------- |
| `width`        | `Responsive<string>` | No default value |
| `minWidth`     | `Responsive<string>` | No default value |
| `maxWidth`     | `Responsive<string>` | No default value |
| `color`        | `enum`               | No default value |
| `highContrast` | `boolean`            | No default value |

### [值](#值)

包含键值对中的值。

## [示例](#示例)

### [方向](#方向)

使用 `orientation` 属性来改变数据列表的布局方式。

```jsx
<DataList.Root orientation={{ initial: "vertical", sm: "horizontal" }}>
  <DataList.Item>
    <DataList.Label minWidth="88px">姓名</DataList.Label>

    <DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">邮箱</DataList.Label>

    <DataList.Value>
      <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
    </DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">公司</DataList.Label>

    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>
```

### [尺寸](#尺寸)

使用 `size` 属性来改变数据列表的大小。

```jsx
<Flex direction="column" gap="6">
  <DataList.Root size="1">
    <DataList.Item>
      <DataList.Label minWidth="88px">姓名</DataList.Label>

      <DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label minWidth="88px">邮箱</DataList.Label>

      <DataList.Value>
        <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
      </DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label minWidth="88px">公司</DataList.Label>

      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root size="2">
    <DataList.Item>
      <DataList.Label minWidth="88px">姓名</DataList.Label>

      <DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label minWidth="88px">邮箱</DataList.Label>

      <DataList.Value>
        <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
      </DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label minWidth="88px">公司</DataList.Label>

      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root size="3">
    <DataList.Item>
      <DataList.Label minWidth="88px">姓名</DataList.Label>

      <DataList.Value>弗拉基米尔·莫若兹</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label minWidth="88px">邮箱</DataList.Label>

      <DataList.Value>
        <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
      </DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label minWidth="88px">公司</DataList.Label>

      <DataList.Value>
        <Link target="_blank" href="https://workos.com">
          WorkOS
        </Link>
      </DataList.Value>
    </DataList.Item>
  </DataList.Root>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性在标签部分分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<DataList.Root orientation="vertical">
  <DataList.Item>
    <DataList.Label color="indigo">姓名</DataList.Label>

    <DataList.Value>靛蓝</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label color="cyan">姓名</DataList.Label>

    <DataList.Value>青色</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label color="orange">姓名</DataList.Label>

    <DataList.Value>橙色</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label color="crimson">姓名</DataList.Label>

    <DataList.Value>深红色</DataList.Value>
  </DataList.Item>
</DataList.Root>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的颜色对比度。

```jsx
<Flex gap="9">
  <DataList.Root orientation="vertical">
    <DataList.Item>
      <DataList.Label color="indigo">姓名</DataList.Label>

      <DataList.Value>靛蓝</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label color="cyan">姓名</DataList.Label>

      <DataList.Value>青色</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label color="orange">姓名</DataList.Label>

      <DataList.Value>橙色</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label color="crimson">姓名</DataList.Label>

      <DataList.Value>深红色</DataList.Value>
    </DataList.Item>
  </DataList.Root>

  <DataList.Root orientation="vertical">
    <DataList.Item>
      <DataList.Label color="indigo" highContrast>
        姓名
      </DataList.Label>

      <DataList.Value>靛蓝</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label color="cyan" highContrast>
        姓名
      </DataList.Label>

      <DataList.Value>青色</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label color="orange" highContrast>
        姓名
      </DataList.Label>

      <DataList.Value>橙色</DataList.Value>
    </DataList.Item>

    <DataList.Item>
      <DataList.Label color="crimson" highContrast>
        姓名
      </DataList.Label>

      <DataList.Value>深红色</DataList.Value>
    </DataList.Item>
  </DataList.Root>
</Flex>
```

<!--$-->

<!--/$-->