New to Telerik UI for Blazor? Download free 30-day trial

Blazor QRCode Overview

The QRCode generates Canvas and SVG images that represent Quick Response (QR) codes.

The generated image from the component is a machine-readable label that contains information about data for a locator, identifier, or tracker that points to a website or application.

Creating Blazor QRCode

  1. Add the TelerikQRCode tag to add the component to your razor page.

  2. Set the Value property.

  3. Set its Size property.

  4. Optionally, choose a QRCode Type (one of the types we support).

A basic configuration of the Telerik QRCode

<TelerikQRCode Size="200px"
               Value="https://docs.telerik.com/blazor-ui/introduction">
</TelerikQRCode>

Encoding

Encoding represents the mapping between messages and qr codes. Read more about the supported Blazor QRCode Encodings.

Types

The component exposes Swiss and Image QRCode types. Read more about the supported Blazor QRCode Types...

Methods

The QRCode methods are accessible through its reference.

  • Refresh - redraws the component.

You can see the example with the Barcode and use the Refresh() method in the same way with QRCode.

Parameters

The Blazor Barcode provides various parameters that allow you to configure the component:

Parameter Type Description
RenderAs RenderingMode enum
Svg
Defines the preferred rendering mode - svg/canvas.
QRCodeEncoding enum The encoding mode used to encode the value.
QRCodeErrorCorrection enum The error correction level used to encode the value.
Value string Defines the initial value of the QRCode.
Size string Specifies the size (Width and Height) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the Dimensions article. Setting both Size and Width and/or Height will throw an error. Setting different values to Width and Height will also cause an issue.
Width string Sets the width of the QRCode. If Height is set and the Size property is not set, the same value as Width should be set to Height.
Height string Sets the height of the QRCode. If Height is set and the Size property is not set, the same value as Height should be set to Width.
Class string The CSS class that will be rendered on the main wrapping element of the QRCode component.
Background string The background color of the QRCode. Accepts a valid CSS color string, including HEX and RGB.
Color string Defines the color of the QRCode elements. The default color is black.
Padding double Defines the minimum distance in pixels that should be left between the border and the QR modules.

QRCodeOverlay parameters

The nested QRCodeOverlay tag exposes parameters that allow you to choose from predefined layouts or insert a custom image in the Blazor QRCode:

Parameter Type Description
QRCodeOverlayType enum Available options are Image and Swiss. When set to image, you have to specify the url source of the image. If set to swiss, a Swiss QR Code is created.
ImageUrl string The URL of the displayed overlay image.
Width double The width of the overlay in pixels.
Height double The height of the overlay in pixels.

QRCodeBorder parameters

The nested QRCodeBorder tag exposes parameters that enable you to customize the appearance of the Blazor QRCode border:

Parameter Type Description
Color string The color of the border. Accepts a valid CSS color string, including HEX and RGB.
Width double The width of the border in pixels. By default the border width is set to zero which means that the border will not be visible.

Next Steps

Explore the QRCode Encodings

Explore the QRCode Types

See Also

In this article