QrCode

component

A QR code in a figure, with what it holds written beside it, a link for a web address, drawn on the server by phil/qr-code-bundle.

Preview

Light

https://example.com/tickets/42

Code

<twig:QrCode content="https://example.com/tickets/42" />

Dark

https://example.com/tickets/42

Code

<twig:QrCode content="https://example.com/tickets/42" />

Try it

Change the props; the example is rendered again by the server.

https://example.com/tickets/42

<twig:QrCode content="https://example.com/tickets/42" />

Variants

`caption`

Whether what the code holds is written beside it.

caption="false"

https://example.com/tickets/42

caption="true"

Usage

This example needs the context of a page to render; its code is below.

Code

<twig:QrCode content="https://example.com/tickets/42" />
<twig:QrCode :content="{type: 'wifi', ssid: 'Cafe', password: 'tea-and-dice'}" alt="Join the network of the cafe" />
<twig:QrCode content="{{ code }}" :caption="false" size="{{ 160 }}" />

Installation

php bin/console ux:install qr-code --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`alt`	`string`	`''`	The name of the image for screen readers.
`caption`	`bool`	`true`	Whether what the code holds is written beside it.
`size`	`int\|null`	`null`	The width and height of the image in pixels; the size of the bundle when null.
`level`	`string\|null`	`null`	The error correction level, L, M, Q or H; the level of the bundle when null.
`logo`	`string`	`''`	The name of a logo of the configuration of the bundle.

Accessibility

The caption says what the code holds, for readers who cannot scan it; without alt the image is hidden behind it, so a screen reader reads it once.

Files to copy

templates/components/QrCode.html.twig

{%- props
    ## mixed A text, or the array of a typed content of the bundle.
    content,
    ## string The name of the image for screen readers.
    alt = '',
    ## bool Whether what the code holds is written beside it.
    caption = true,
    ## int|null The width and height of the image in pixels; the size of the bundle when null.
    size = null,
    ## string|null The error correction level, L, M, Q or H; the level of the bundle when null.
    level = null,
    ## string The name of a logo of the configuration of the bundle.
    logo = ''
-%}
{{ component('PhilQrCode:QrCode', {content: content, alt: alt, caption: caption, size: size, level: level, logo: logo}|merge(attributes.defaults({class: 'isQrCode'}).all)) }}