Docs›Componentes (Admin)›mad-display-field
Componentes (Admin)

mad-display-field

Read-only formatado para views de detalhe.

Campo somente-leitura para views de detalhe. Exibe valores formatados com label uppercase, sem borda nem input. Integra com form->set() / form->fill() via MadRenderContext.

Props

Prop Tipo Default Descricao
name string '' Nome do campo (le do MadRenderContext)
label string '' Label superior
value string null Valor direto (override do context)
format string '' Formatacao: money:R$, date, datetime, email, phone, url, cpf, cnpj
badge string '' Mapa de badges: val:variant:label|... (mesma sintaxe do <mad-col>)
icon string '' Icone Lucide ao lado do label
variant string '' Cor do valor: success, warning, danger, info, primary
copyable bool false Botao copiar ao hover
expandable bool false Trunca em 3 linhas com "ver mais"
empty string '—' Texto quando valor vazio
hint string '' Texto de ajuda abaixo do valor
width string '' Largura do campo (valor CSS: '200px', '50%')
max-width string '' Largura maxima (maxWidth internamente)
class string '' Classes CSS extras

Uso basico (valor via form->set)

// Controller
$this->form->set('nome', $cliente->nome);
$this->form->set('email', $cliente->email);

<mad-display-field name="nome" label="Nome" />
<mad-display-field name="email" label="Email" format="email" />

Valor direto (sem form->set)

<mad-display-field label="Razao Social" :value="$empresa->razao_social" />

Formatacoes disponiveis

{{-- Monetario --}}
<mad-display-field name="valor" label="Valor" format="money:R$" />

{{-- Data --}}
<mad-display-field name="dt_nascimento" label="Nascimento" format="date" />

{{-- Data e hora --}}
<mad-display-field name="dt_criacao" label="Criado em" format="datetime" />

{{-- Email (link mailto) --}}
<mad-display-field name="email" label="Email" format="email" />

{{-- Telefone (link tel, DDI +55 fixo) --}}
<mad-display-field name="telefone" label="Telefone" format="phone" />

{{-- URL (link externo) --}}
<mad-display-field name="site" label="Website" format="url" />

{{-- CPF (xxx.xxx.xxx-xx) --}}
<mad-display-field name="cpf" label="CPF" format="cpf" copyable />

{{-- CNPJ (xx.xxx.xxx/xxxx-xx) --}}
<mad-display-field name="cnpj" label="CNPJ" format="cnpj" copyable />

Badge (status colorido)

<mad-display-field name="status" label="Status"
    badge="A:success:Ativo|I:danger:Inativo|P:warning:Pendente" />

Com icone e copy-to-clipboard

<mad-display-field name="cpf" label="CPF" icon="id-card" format="cpf" copyable />

O botao de copiar aparece no hover e copia o valor cru (sem formatacao).

Texto longo com expandir/recolher

<mad-display-field name="observacoes" label="Observacoes" expandable />

Trunca em 3 linhas com botao "ver mais" / "ver menos".

Variant (cor no valor)

<mad-display-field name="saldo" label="Saldo" format="money:R$" variant="success" />
<mad-display-field name="divida" label="Divida" format="money:R$" variant="danger" />

Layout em grid

<mad-form-grid :cols="3">
    <mad-display-field name="nome" label="Nome" />
    <mad-display-field name="email" label="Email" format="email" />
    <mad-display-field name="telefone" label="Telefone" format="phone" />
</mad-form-grid>

Com hint

<mad-display-field name="codigo" label="Codigo interno" hint="Gerado automaticamente pelo sistema" />

Dentro de form-section

<mad-form-section title="Dados do cliente" icon="user">
    <mad-form-grid :cols="2">
        <mad-display-field name="nome" label="Nome" icon="user" />
        <mad-display-field name="email" label="Email" format="email" icon="mail" />
    </mad-form-grid>
    <mad-display-field name="obs" label="Observacoes" expandable />
</mad-form-section>

Quando usar display-field vs input-field readonly

Cenario Usar
View de detalhe (somente visualizacao) <mad-display-field>
Campo que pode ser editado mas esta temporariamente bloqueado <mad-input-field ... readonly />
Formulario misto (alguns campos editaveis, outros nao) <mad-input-field ... readonly /> para os bloqueados
Pagina/drawer de visualizacao sem nenhum campo editavel <mad-display-field> para todos

NUNCA fazer

{{-- ERRADO: usar input readonly para views de detalhe --}}
<mad-input-field name="nome" label="Nome" readonly />

{{-- CERTO: usar display-field --}}
<mad-display-field name="nome" label="Nome" />

{{-- ERRADO: montar display manualmente com HTML --}}
<div>
    <span class="label">Nome</span>
    <span>{{ $nome }}</span>
</div>

{{-- CERTO --}}
<mad-display-field name="nome" label="Nome" />

{{-- ERRADO: montar o valor formatado manualmente em PHP e ecoar --}}
$display = '<span style="font-weight:bold;color:#333;">' . $value . '</span>';
echo $display;

{{-- CERTO --}}
<mad-display-field name="campo" label="Label" />