Pharos
Navegar componentes
← Componentes

MetadataList

MetadataListExemplo
MetadataList exibe pares chave-valor para atributos de objetos como qualidade, condição e status, em um layout estruturado. Use para painéis de detalhes, resumos de configurações e informações de registros.
Importação
import {MetadataList} from '@pharos-ds/core/MetadataList';

Exemplos

Área interativa

columns
orientation
Limitar itens
Detalhes
Status
Ativo
Criado em
30 jul 2026
Responsável
Ami Pena
Código
import {MetadataList, MetadataListItem} from '@pharos-ds/core/MetadataList';

<MetadataList
  columns="single"
  orientation="vertical"
  maxNumOfItems={false}
 />

Boas práticas

  • Faça: Escolha a posição do rótulo com base no conteúdo: "start" para valores curtos, "top" para valores longos ou complexos.
  • Faça: Recolha listas longas com `maxNumOfItems` para manter a página escaneável.
  • Evite: Use para entrada extensa de formulário; use um layout de formulário.
  • Evite: Use para dados que não têm uma estrutura clara de chave-valor.

Props

PropTipoPadrãoDescrição
children *ReactNode—Itens de metadata (componentes MetadataListItem).
columns'multi' | 'single' | number'single'Modo de layout em colunas.
label{ position?: 'start' | 'top', width?: number | string }{ position: 'start' } (single-column) / { position: 'top' } (multi-column)Configuração de exibição do rótulo. position controla posicionamento do rótulo; width define largura customizada da coluna de rótulos. Padrão: { position: 'top' } para layouts multi-coluna.
maxNumOfItemsnumber—Número máximo de itens a mostrar antes de recolher com toggle mostrar mais/menos.
orientation'vertical' | 'horizontal''vertical'Orientação do layout. Modo horizontal distribui itens em uma linha com flex-wrap.
titleReactNode—Título ou heading opcional acima da lista.
xstyleStyleXStyles—Estilos StyleX para customização de layout. Deve ser um valor stylex.create().
Pacote: @pharos-ds/core · Import: @pharos-ds/core/MetadataList
MetadataList · Pharos