# 元数据列表项

## 使用方法

元数据列表里的一对「名字 + 值」。

```ts
import { MetadataListItem } from '@astryx-vue/core/MetadataList'
```

它是 [元数据列表](/components/metadata-list) 里的一项。名字写 `label`，值写在默认插槽里，所以值可以随便放：纯文字、徽章、链接，或者你自己的一段结构。名字放旁边还是放上面、名字那一栏要不要固定宽度，都由外面的列表决定，这一项只负责跟着走。

`label` 是必填的，因为只有它说明这个值是什么意思。

## 示例

常见的用法和不同的状态。

### 基础

元数据列表里一行行的键值对。值可以是任何内容，从纯文字到徽章这样的组件都行。

```vue
<script setup lang="ts">
import { Badge } from '@astryx-vue/core/Badge'
import { MetadataList, MetadataListItem } from '@astryx-vue/core/MetadataList'
</script>

<template>
  <MetadataList title="Deployment">
    <MetadataListItem label="Environment">
      Production
    </MetadataListItem>
    <MetadataListItem label="Status">
      <Badge label="Healthy" variant="green" />
    </MetadataListItem>
    <MetadataListItem label="Version">
      v2.14.0
    </MetadataListItem>
    <MetadataListItem label="Last deployed">
      June 12, 2026
    </MetadataListItem>
  </MetadataList>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `label` | `string` | — | 这一项的名字，必填。值写在默认插槽里。 |

## 插槽

- 默认插槽：这一项的值。放什么都行：文字、徽章、链接，或者自己写的一段结构。
- `icon`：名字前面的图标。

名字和值会渲染成 <code>&lt;dt&gt;</code> 和 <code>&lt;dd&gt;</code>；列表把名字放到上面时，会变成一个上下叠的小块。两种情况下读屏都是先念名字再念值。