Revision: Tue, 02 Nov 2021 18:17:51 GMT

Forms: QR Code

UI component for QR Codes

They are located in 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 demo repository

Usage

<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 Type of render, 'canvas' or 'svg'
size no 200 Size of code
bgColor no white Background color
fgColor no black Foreground color
ecLevel no M Error correction level
logoUrl no - specifies URL of logo to render on top of code.
logoHeight no - Logo render height
logoWidth no - Logo render width
logoX no - position to render logo at
logoY no - position to render logo at
logoMargin no - renders background color space around logo. Specify 0 to render only under logo. Omit to render logos with transparent BG.
<ui:qrcode value="HK3ARG6MYFMIDDHB"/>

QR Code

<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"
/>

QR Code

Edit this page