QR Code

<pc-qr-code>

0.1.0

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Generate a QR code and render it using the Canvas API.

QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built‐in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, log into a Wi-Fi network and so on.

<div class="qr-code-overview">
    <pc-qr-code
        value="https://example.com"
        label="Scan this QR code to visit example.com."
    ></pc-qr-code>

    <br />

    <pc-input label="Value" maxlength="255" clearable></pc-input>
</div>

<script>
    const container = document.querySelector(".qr-code-overview");
    const qrCode = container.querySelector("pc-qr-code");
    const input = container.querySelector("pc-input");

    customElements.whenDefined("pc-qr-code").then(() => {
        input.value = qrCode.value;
        input.addEventListener("pc-input", () => {
            qrCode.value = input.value;
        });
    });
</script>

<style>
    .qr-code-overview {
        max-inline-size: 16rem;
    }

    .qr-code-overview pc-input {
        margin-block-start: var(--pc-spacing-l);
    }
</style>

Code

Edit

Demos

Colours

Use the fill and background attributes to modify the QR code’s colours. You should always ensure at least a contrast ratio of 4,5∶1 to ensure that QR code scanners read the QR code properly.

<pc-qr-code
    value="https://example.com"
    background="white"
    fill="indigo"
></pc-qr-code>

Code

Edit

Size

Use the size attribute to change the size of the QR code.

<pc-qr-code value="https://example.com" size="64"></pc-qr-code>

Code

Edit

Radius

Use the radius attribute to round the corners of the QR code data.

<pc-qr-code value="https://example.com" radius="0.5"></pc-qr-code>

Code

Edit

Error correction

QR codes can be rendered with various levels of error correction that can be set using the error-correction attribute. This example generates four codes with the same value using different error correction levels.

<div class="qr-error-correction">
    <pc-qr-code value="https://example.com" error-correction="L"></pc-qr-code>
    <pc-qr-code value="https://example.com" error-correction="M"></pc-qr-code>
    <pc-qr-code value="https://example.com" error-correction="Q"></pc-qr-code>
    <pc-qr-code value="https://example.com" error-correction="H"></pc-qr-code>
</div>

<style>
    .qr-error-correction {
        display: flex;
        gap: var(--pc-spacing-l);
        flex-wrap: wrap;
    }
</style>

Code

Edit

Eigenschaften

Name	Beschreibung	Standard
`value`	The QR code’s value. Typ: `string`	`""`
`label`	A label to use to describe the QR code to assistive devices. If unspecified, the value will be used instead. Typ: `string`	`""`
`size`	The size of the QR code in pixels. Typ: `number`	`128`
`fill`	The QR code’s fill colour. This can be any valid CSS colour value, but not a custom property. Typ: `string`	`"black"`
`background`	The QR code’s background colour. This can be any valid CSS colour value or `transparent`, but not a custom property. Typ: `string`	`"white"`
`radius`	The corner radius of each QR code module. Must be a value between 0 and 0,5. Typ: `number`	`0`
`errorCorrection` `error-correction`	The level of error correction to use. Typ: `"L" \| "M" \| "Q" \| "H"`	`"M"`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.	‐

Erfahre mehr über Attribute und Eigenschaften.

Parts

Name	Beschreibung
`base`	The component’s base wrapper.

Erfahre mehr über das Anpassen von CSS‐Parts.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/qr-code/qr-code.js"></script> 

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/qr-code/qr-code.js"; 

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

import "placer-toolkit/dist/components/qr-code/qr-code.js";