Metadata List
@astryxdesign/core v0.7.1 · MetadataList
Usage
MetadataList lays out label and value pairs. MetadataListItem is one pair. A single column places the label beside the value. Several columns, or a numeric column count, stack the label above the value and repeat the track. columns="multi" uses repeat(auto-fill, minmax(280px, 1fr)).
orientation="horizontal" wraps the pairs in one row and ignores columns, label, and maxNumOfItems. maxNumOfItems hides the rest behind a show more control. label.width only applies when the label sits beside the value. A long label or value can break inside a word so a narrow container is not pushed wider. Extra attributes on MetadataListItem land on the dt when the label sits beside the value, and on the wrapper around the pair when the label is stacked above it.
<script setup lang="ts">
import { MetadataList, MetadataListItem } from '@astryx-vue/core/MetadataList'
</script>
<template>
<MetadataList>
<MetadataListItem label="Name">
MetadataList
</MetadataListItem>
<MetadataListItem label="Status">
Active
</MetadataListItem>
</MetadataList>
</template>Anatomy
| Element | Description |
|---|---|
| Title | Optional title for the metadata list. |
| Label | The key label for each metadata entry. |
| Metadata | The value displayed in various formats. |
| Disclosure | Collapse/expand control for the list. |
Best practices
| Guidance | Practices |
|---|---|
| Do | Keep labels short. The value is the thing a person came to read. |
| Do | Use one column for a narrow details pane, and multi when the pane is wide enough for several pairs. |
| Do | Set maxNumOfItems when a record has more fields than the page should show at once. |
| Don't | Put a long sentence in a label. The label track is sized for a short name. |
| Don't | Combine orientation="horizontal" with a column count and expect the count to apply. Horizontal layout ignores it. |
Examples
MetadataList — Basic
Single-column key-value metadata list.
MetadataList — Collapsible
Metadata list with a show-more toggle after a set number of items.
MetadataList — Horizontal
Horizontal metadata items for compact inline display.
MetadataList — Multi-Column
Multi-column metadata grid with token tags.