QR Code

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. The recommended HTML notation is kebab-case (foreground-alpha, background-alpha), but the component also accepts aliases in camelCase (foregroundAlpha, backgroundAlpha).

Supported attributes

• value: the value encoded in the QR.
• size: the size of the resulting QR in px.
• padding: internal indentation in px.
• foreground: foreground colour.
• foreground-alpha (alias foregroundAlpha): foreground opacity in the range 0-1.
• background: background color.
• background-alpha (alias backgroundAlpha): background opacity in the range 0-1.
• level: error correction level (L, M, Q, H).

Slots:

• top: the content displayed above the QR.
• bottom: the content displayed below the QR.

When to use

Use wje-qr-code to display content that improves the readability, scannability, or context of the information.

When not to use

Do not use it as a substitute for structured data where precise interaction is needed.

Accessibility

Add alternative text for images, legible contrasts and text equivalents for icons without description.

Recommended practices

• Compress media and use lazy loading for large lists.
• Keep information priorities consistent for tabs and lists.
• Do not repeat the same information in text and icon at the same time with no added value.

Attributes and properties

Name	Attribute	Type	Default	Description
value	value	string	empty value	The value that is encoded into the QR code (URL or text).
size	size	number	by QRious Library	Resulting QR code size in pixels.
padding	padding	number	by QRious Library	Internal indentation around the QR code.
foreground	foreground	string	by QRious Library	Foreground colour of the QR code.
foregroundAlpha	foreground-alpha (foregroundAlpha)	number (0-1)	by QRious Library	Opacity of the foreground.
background	background	string	by QRious Library	QR code background colour.
backgroundAlpha	background-alpha (backgroundAlpha)	number (0-1)	by QRious Library	Background opacity.
level	level	L \	M \	Q \

Events

The component does not currently issue its own domain events.

Methods

The component does not currently provide public methods.

CSS shadow parts

• native - the native canvas element in which the QR is rendered.

CSS custom variables

The component does not currently export custom CSS custom properties.

Slots

• top - the content displayed above the QR code.
• bottom - the content displayed under the QR code.