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

mad-qrcode

QR code embutido em página (PNG/SVG).

Componente display read-only para renderizar QR codes em qualquer tela (form, view de detalhe, dashboard, drawer). Renderiza via bacon/bacon-qr-code — PNG via Imagick quando disponível, com fallback automático para SVG puro — embedado como data URI: sem JS, sem requisição extra, sem dependência de filesystem.

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

Props

Prop Tipo Default Descrição
data string '' Conteúdo do QR (URL, texto, JSON). Vazio = não renderiza nada
size int 200 Lado do quadrado em px (clamp 32–800)
ec-level string 'M' Nível de correção de erro: L, M, Q, H
align string 'left' Alinhamento do bloco: left, center, right
alt string 'QR' Atributo alt da <img>
class string '' Classes CSS extras no wrapper

Uso

{{-- URL --}}
<mad-qrcode data="https://app.madbuilder.com.br/pedido/42" :size="200" />

{{-- Centralizado, maior --}}
<mad-qrcode data="https://app.madbuilder.com.br/pedido/42"
    :size="240" align="center" />

{{-- Maior correção de erro (logo no centro, ambiente sujo) --}}
<mad-qrcode data="123456789" :size="200" ec-level="H" />

Em view de detalhe

<mad-form-section title="Verificação" icon="qr-code">
    <mad-qrcode :data="$pedido->verifyUrl()" :size="180" align="center" />
</mad-form-section>

Comportamento de erro

Se data estiver vazio, o componente não renderiza nada (sem erro fatal). A mesma proteção cobre qualquer exception lançada pela lib geradora — o pior caso é o QR simplesmente não aparecer.

Quando usar qrcode vs barcode

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

NUNCA fazer

{{-- ERRADO: gerar o QR no controller e passar como base64 manual --}}
@php
    $qr = (new \BaconQrCode\Writer(...))->writeString($url);
    $b64 = base64_encode($qr);
@endphp
<img src="data:image/png;base64,{{ $b64 }}" />

{{-- CERTO: deixar o componente cuidar de tudo --}}
<mad-qrcode :data="$url" :size="200" />

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

{{-- CERTO: na tela, mad-qrcode com px --}}
<mad-qrcode data="..." :size="200" />

{{-- 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-qrcode :data="$codigo" />

{{-- ERRADO: passar size como string sem : (vira string literal) --}}
<mad-qrcode data="x" size="200" />

{{-- CERTO: :size para inteiro --}}
<mad-qrcode data="x" :size="200" />