Skip to main content

QR Code

shadow

A code consisting of an array of black and white squares that is typically used to store URLs or other information for the camera on a smartphone to read. These qr codes can be easily customised using different attributes.

Basic use

To use the QR component, include it in the HTML with the required attributes.

Attributes and Properties

value

DescriptionThe value to be encoded into the QR code.
Attributevalue
Typestring
Default"empty value"

background

DescriptionQR code background colour.
Attributebackground
Typestring
Defaultundefined

backgroundAlpha

DescriptionQR code background transparency (0-1).
AttributebackgroundAlpha
Typenumber
Defaultundefined

foreground

DescriptionForeground colour of the QR code.
Attributeforeground
Typestring
Defaultundefined

foregroundAlpha

DescriptionQR code foreground transparency (0-1).
AttributeforegroundAlpha
Typenumber
Defaultundefined

level

DescriptionQR code error correction level (L, M, Q, H).
Attributelevel
Typestring
Defaultundefined

padding

DescriptionInternal QR code offset in pixels.
Attributepadding
Typenumber
Defaultundefined

size

DescriptionQR code size in pixels.
Attributesize
Typenumber
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeRefers to the canvas inside the element.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

NameDescription
topSlot for content at the top of the QR code.
bottomSlot for content at the bottom of the QR code.