UI component for QR Codes
They are located in the toolkit bundle, that can be included like so:
<use:bundle path="toolkit:bundle"/>
This is also automatically included when using
<use:bundle path="keeper:bundle"/>
See Usage Samples in the demo repository
<ui:qrcode
value="https://spiral.dev/"
type="canvas"
size="200"
bgColor="#f8f9fa"
fgColor="#49545f"
ecLevel="H"
/>
script
tag is optional, if specified, JSON inside will be used
for TinyMCE options
Parameter | Required | Default | Description |
---|---|---|---|
value | yes | - | Value to render |
type | no | svg | A type of render, 'canvas' or 'svg' |
size | no | 200 | Сode size |
bgColor | no | white | A background color |
fgColor | no | black | A foreground color |
ecLevel | no | M | An error correction level |
logoUrl | no | - | Specifies URL of the logo to render on top of the code. |
logoHeight | no | - | Logo render height |
logoWidth | no | - | Logo render width |
logoX | no | - | A position to render the logo at |
logoY | no | - | A position to render the logo at |
logoMargin | no | - | Renders the background color space around the logo. Specify 0 to render only under the logo. Omit to render logos with transparent BG. |
<ui:qrcode value="HK3ARG6MYFMIDDHB"/>
<ui:qrcode
value="https://spiral.dev/"
type="canvas"
size="300"
bgColor="#f8f9fa"
fgColor="#578fca"
ecLevel="H"
logoUrl="/logo.svg"
logoHeight="50"
logoWidth="40"
logoX="130"
logoY="125"
logoMargin="0"
/>