astryx-vue

元数据列表

@astryxdesign/core v0.7.1 · MetadataList

Name
MetadataList
Status
Active
Owner
Joey

使用方法 ​

MetadataList 排列一组标签和值。MetadataListItem 是其中一对。单列时标签在值旁边。多列或数字列数时，标签叠在值上面，轨道按列数重复。columns="multi" 使用 repeat(auto-fill, minmax(280px, 1fr))。

orientation="horizontal" 把每一对排成可换行的一行，并忽略 columns、label 和 maxNumOfItems。maxNumOfItems 把多出来的项收进「显示更多」。label.width 只在标签位于值旁边时生效。长标签和长值会在单词内部断开，避免把窄容器撑开。写在 MetadataListItem 上的其余属性，并排时落在 dt 上，标签叠在值上面时落在包住这一对的那一层上。

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

<template>
  <MetadataList>
    <MetadataListItem label="名称">
      MetadataList
    </MetadataListItem>
    <MetadataListItem label="状态">
      使用中
    </MetadataListItem>
  </MetadataList>
</template>

建议 ​

建议做法
推荐标签写短。读者要看的是值。
推荐窄的详情栏用单列，宽度够放好几对时用 multi。
推荐字段比页面一次能放下的多时，设置 maxNumOfItems。
避免把一整句放进标签。标签轨道是按短名字留的。
避免水平排列时还指望列数生效。水平布局会忽略列数。

解剖

部分说明
标题元数据列表的可选标题。
标签每条元数据的键名。
元数据以各种格式显示的值。
展开控制列表的收起和展开控件。

示例 ​

MetadataList — 基础

Name
MetadataList
Status
Active
Owner
Joey

单列的键值元数据。

MetadataList — 可折叠

Name
MetadataList
Status
Active
Owner
Joey

超过设定条数后，用「显示更多」把其余项收起来。

MetadataList — 水平

Status
Active
Type
Premium
Owner
Joey
Created
Jan 15, 2026

水平排开，适合一行里放几项紧凑信息。

MetadataList — 多列

Name
MetadataList
Status
Active
Owner
Joey
Created
Jan 15, 2026
Tags
componentxds
Priority
Tier 1

多列网格，其中一项的值是标签。