QR Code Generator
Generates a QR Code.
<QRCode value="https://nns.ic0.app/" ariaLabel="Network Nervous System">
<img
src="./img/logo.svg"
role="presentation"
alt="Test logo"
loading="lazy"
slot="logo"
/>
</QRCode>
Library
This component uses the library qr-creator.
Properties
Property | Description | Type | Default |
---|---|---|---|
ariaLabel | An accessible label for the QR code. If undefined the value is use as fallback. | string or undefined | undefined |
value | A value to be encoded within the QR code. On change the QR code is re-drawed. | string | |
fillColor | The fill color (“the color of the small squares”). | string | black |
backgroundColor | The background color of the QR code. | string | white |
radius | Radius. | number | 0 |
ecLevel | The error correction level. See https://www.qrcode.com/en/about/error_correction.html. | L or M or Q or H | H |
Styling
The component fits the available space where it is used. Therefore, the parents should be rendered before mounting this component.
Slots
Slot name | Description |
---|---|
logo | An optional logo displayed over the QR code. |