Generates a QR code based on the provided value and options. The component renders an SVG representation of the QR code, which can be customized using various properties.
- Element
-
igc-qr-code
- CSS Parts
-
background— The background rect of the QR code. -
dots— The data modules (dots) of the QR code. -
corner-square— The outer corner (finder-pattern) squares of the QR code. -
corner-dot— The inner corner (finder-pattern) dots of the QR code.
Properties
Section titled "Properties"dotStyle
Section titled "dotStyle"The style of the data modules (dots) in the QR code, and of the inner dot of each finder-pattern corner. This can be 'square', 'circle', or 'rounded'.
dotStyle: QrDotStyle = 'square' Defined in src/components/qr-code/qr-code.ts:170
Optional errorLevel
Section titled "errorLevel"The error correction level for the QR code, which determines the QR code's ability to be read if it is partially obscured or damaged. Valid values are 'L', 'M', 'Q', and 'H', where 'L' provides the lowest level of error correction and 'H' provides the highest level.
errorLevel: QrErrorCorrectionLevel = 'M' Defined in src/components/qr-code/qr-code.ts:106
Optional logoMargin
Section titled "logoMargin"The margin around the logo in pixels. This is the whitespace area surrounding the logo within the QR code, which helps ensure that the logo does not interfere with the QR code's scannability.
logoMargin: number Defined in src/components/qr-code/qr-code.ts:160
logoSize
Section titled "logoSize"The size of the logo, as a ratio of the maximum area that can safely be obscured by a logo while the QR code remains scannable (up to 9% of the code's area, at the highest error correction level). The value should be a number between 0 and 1, where 0 means no logo and 1 means the logo will cover the full safe area (not the entire QR code). The default value is 0.4, meaning the logo covers 40% of that safe area (~3.6% of the QR code).
When error-level is not explicitly set, the smallest error correction level that can
accommodate the requested logo size is chosen automatically.
logoSize: number = 0.4 Defined in src/components/qr-code/qr-code.ts:151
Optional logoSrc
Section titled "logoSrc"The source URL of an optional logo image to be displayed at the center of the QR code. The logo can help with branding and recognition. If provided, the component will attempt to render the logo within the QR code while maintaining scannability.
logoSrc: string Defined in src/components/qr-code/qr-code.ts:135
margin
Section titled "margin"The margin (quiet zone) around the QR code, expressed as a number of QR code modules rather than pixels. This is the blank border area surrounding the code, which helps ensure that it can be properly scanned.
margin: number = 4 Defined in src/components/qr-code/qr-code.ts:126
The size of the QR code in pixels. This determines the width and height of the generated QR code. The default value is 128 pixels.
size: number = 128 Defined in src/components/qr-code/qr-code.ts:115
squareStyle
Section titled "squareStyle"The style of the corner squares in the QR code. This can be 'square', 'circle', or 'rounded'.
squareStyle: QrCornerSquareStyle = 'square' Defined in src/components/qr-code/qr-code.ts:179
Optional value
Section titled "value"The value to be encoded in the QR code. This can be any string, such as a URL, text, or other data. When this property is set, the component will generate a QR code representing the provided value.
value: string Defined in src/components/qr-code/qr-code.ts:85
Optional version
Section titled "version"The version of the QR code to generate, which determines the size and data capacity of the QR code. Valid values are integers from 1 to 40, where each version corresponds to a specific module size and data capacity.
If not specified, the component will automatically select the smallest version that can accommodate the provided value.
version: number Defined in src/components/qr-code/qr-code.ts:96
styles
Section titled "styles"Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.
Note on Content Security Policy:
Element styles are implemented with <style> tags when the browser doesn't
support adopted StyleSheets. To use such <style> tags with the style-src
CSP directive, the style-src value must either include 'unsafe-inline' or
nonce-<base64-value> with <base64-value> replaced be a server-generated
nonce.
To provide a nonce to use on generated <style> elements, set
window.litNonce to a server-generated nonce in your page's HTML, before
loading application code:
``
styles: CSSResult[] Defined in src/components/qr-code/qr-code.ts:50