Docs›Componentes (Admin)›mad-barcode
Componentes (Admin)

mad-barcode

Barcode C128/EAN13/UPCA embutido.

Componente display read-only para renderizar códigos de barras em qualquer tela (form, view de detalhe, dashboard, drawer). PNG embedado como data URI via picqer/php-barcode-generator — sem JS, sem requisição extra, sem dependência de filesystem.

Para QR codes, use <mad-qrcode> (mesma família de componente, formato diferente). Para PDF (DOMPDF) use a variante <mad-doc-barcode> (unidades em mm, design próprio para impressão). Para leitura via câmera (entrada do usuário), use <mad-scanner-field> — <mad-barcode> é só exibição, não captura.

Props

Prop Tipo Default Descrição
data string '' Conteúdo do barcode. Vazio = não renderiza nada
format string 'C128' C128, C39, EAN13, EAN8, UPCA. Formato desconhecido cai em C128
width int 240 Largura em px (clamp 40–900)
height int 60 Altura em px (clamp 20–300)
show-text bool true Imprime o texto monoespaçado abaixo do código
align string 'left' left, center, right
alt string 'Barcode' Atributo alt da <img>
class string '' Classes CSS extras

Uso

{{-- Code 128 padrão --}}
<mad-barcode data="PT0046.012.345" />

{{-- EAN-13 (produto) com texto desligado --}}
<mad-barcode data="7891234567890" format="EAN13"
    :width="220" :height="80" :show-text="false" />

{{-- Maior, centralizado --}}
<mad-barcode data="ABC-123-XYZ" format="C128"
    :width="320" :height="80" align="center" />

Em view de detalhe

<mad-form-section title="Identificação" icon="barcode">
    <mad-barcode :data="$produto->codigo_barras" format="EAN13" align="center" />
</mad-form-section>

Comportamento de erro

Se format="EAN13" (ou EAN8/UPCA) recebe um valor inválido (check digit errado, comprimento inválido), o componente não gera erro fatal — apenas não renderiza nada. A mesma proteção cobre qualquer exception da lib geradora.

Quando usar cada formato

Cenário Usar
Código de produto interno, identificador alfanumérico curto <mad-barcode format="C128"> (padrão)
EAN/UPC de produto <mad-barcode format="EAN13"> (ou EAN8/UPCA)
URL, texto longo, JSON, dados arbitrários <mad-qrcode>
Em PDF (DOMPDF) <mad-doc-barcode> (mm-based)
Ler código via câmera <mad-scanner-field> (input, não display)

NUNCA fazer

{{-- ERRADO: gerar o PNG no controller e passar como base64 manual --}}
@php
    $gen = new \Picqer\Barcode\BarcodeGeneratorPNG();
    $b64 = base64_encode($gen->getBarcode($codigo, $gen::TYPE_CODE_128));
@endphp
<img src="data:image/png;base64,{{ $b64 }}" />

{{-- CERTO: deixar o componente cuidar de tudo --}}
<mad-barcode :data="$codigo" />

{{-- ERRADO: usar mad-doc-barcode na tela (unidades em mm, design para PDF) --}}
<mad-doc-barcode data="..." :width-mm="50" />

{{-- CERTO: na tela, mad-barcode com px --}}
<mad-barcode data="..." :width="240" />

{{-- ERRADO: usar mad-scanner-field para EXIBIR um código --}}
<mad-scanner-field name="codigo" :value="$codigo" />
{{-- scanner-field é INPUT (lê pela câmera), não display --}}

{{-- CERTO --}}
<mad-barcode :data="$codigo" />