Skip to content

docs(QRCode): Improve Size and border Width documentation #3023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 13, 2025
Merged

docs(QRCode): Improve Size and border Width documentation #3023

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions components/barcodes/qrcode/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,16 @@ The generated image from the component is a machine-readable label that contains

## Creating Blazor QRCode

1. Add the `TelerikQRCode` tag to add the component to your razor page.
1. Use the `TelerikQRCode` tag to add the component to your razor page.
1. Set the `Value` parameter, according to the [encoding recommendations](slug:qrcode-encoding).
1. Set the `Size` parameter, depending on the expected scanning distance and the required data capacity.
1. (optional) Define a [QRCode overlay type](slug:qrcode-qr-code-types)).
Copy link
Contributor

@ikoevska ikoevska Sep 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. (optional) Define a [QRCode overlay type](slug:qrcode-qr-code-types)).
1. (optional) Define a [QRCode overlay type](slug:qrcode-qr-code-types).


1. Set the `Value` property.

1. Set its `Size` property.

1. Optionally, choose a `QRCode Type` (one of the [types we support](slug:qrcode-qr-code-types)).

>caption A basic configuration of the Telerik QRCode
>caption Basic Telerik QRCode

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

Expand Down Expand Up @@ -58,7 +55,7 @@ The Blazor Barcode provides various parameters that allow you to configure the c
| `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](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. |
| `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](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. To set an optimal `Size`, consider the expected scanning distance and data capacity. |
| `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. |
Expand All @@ -84,7 +81,7 @@ The nested `QRCodeBorder` tag exposes parameters that enable you to customize th
| 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. |
| `Width` | `double` | The width of the border in pixels. The default value is `0` and the border is not visible. The QR Code border is part of the component `Size`. Thus, a wider border may require a larger `Size`. |

## Next Steps

Expand Down