QR Code — lunaDOM Docs

The <luna-qr-code> component generates QR codes dynamically with customizable styling and error correction levels.

Paths

/lunadom/components/qr-code/qr-code.js

REQUIRED

/lunadom/components/qr-code/qr-creator.min.js

REQUIRED

QR Code Examples

Rounded + Color

Classic + Padding

WiFi + Custom Radius

Live Generator

Type below to generate a QR code in real-time.

Customization

Attributes
value - Content to encode in the QR code
size - Size in pixels (default: 200)
radius - Module corner radius (0-1) (default: 0)
padding - Padding around the QR code (default: 0)
fill - QR code module color (default: #000)
background - Background color (default: #fff)
ec-level - Error correction level (L, M, Q, H) (default: 'M')

CSS Variables
--luna-qr-color - The default color of the QR code modules
--luna-qr-bg - The default background color of the QR code
--luna-qr-radius - The border radius of the rendered canvas

Example Code

<luna-qr-code value="https://luna.dom" size="120" radius="0.5" fill="#22c55e" background="#111" > </luna-qr-code>  <luna-qr-code value="https://google.com" size="120" padding="2" radius="0" > </luna-qr-code>  <luna-qr-code value="WIFI:S:LunaNet;T:WPA;P:password;;" size="120" ec-level="H" style="--luna-qr-radius: 12px;" > </luna-qr-code>  <luna-input id="qr-live-input" placeholder="Type something..." > </luna-input> <luna-qr-code id="qr-live-preview" value="Luna" size="120" padding="1" > </luna-qr-code> <script> document.getElementById('qr-live-input').addEventListener('input', (e) => { const qrCode = document.getElementById('qr-live-preview'); qrCode.setAttribute('value', e.target.value || 'Luna'); }); </script>