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

Blazor Barcode Overview

The Blazor Barcode component represents data in a machine-readable format. It supports several different encoding standards.

All graphics are rendered on the client by using Scalable Vector Graphics (SVG).

Creating Blazor Barcode

Add the TelerikBarcode tag to add the component to your razor page.
Set the Value property.
Set the Height and Width properties.
Optionally, choose a Type (one of the encodings we support).
- Its default encoding is Code39.

A basic configuration of the Telerik Barcode

<TelerikBarcode Width="300px"
                Height="200px"
                Value="123456789">
</TelerikBarcode>

Encoding

Encoding represents the mapping between messages and barcodes. Read more about the supported Blazor Barcode Encodings.

Methods

The Barcode methods are accessible through it's reference.

Refresh - redraws the component.

Get a reference to the Barcode and use its methods

@* This code snippet showcases an example usage of the Refresh() method. *@

<TelerikButton OnClick="@ChangeSize">Change Size!</TelerikButton>
<br />
<br />
<TelerikButton OnClick="@(() => TelerikBarcodeRef.Refresh())">Refresh component after changes!</TelerikButton>
<br />
<br />

<TelerikBarcode @ref="TelerikBarcodeRef" Width="@Width"
                Height="@Height"
                Value="123456789">
</TelerikBarcode>

@code{
    Telerik.Blazor.Components.TelerikBarcode TelerikBarcodeRef { get; set; }

    string Height { get; set; } = "200px";
    string Width { get; set; } = "300px";

    public void ChangeSize()
    {
        Height = "400px";
        Width = "500px";
    }
}

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.
`Checksum`	`bool`	By setting it to true, the Barcode will display the checksum digit next to the value in the text area.
`Type`	`BarcodeType` enum `Code39`	Defines the symbology (encoding) the Barcode will use - (full list of supported encodings)
`Value`	`string`	Defines the initial value of the Barcode.
`Width`	`string`
`Height`	`string`
`Class`	`string`	The CSS class that will be rendered on the main wrapping element of the Barcode component.
`Background`	`string`
`Color`	`string`	Defines the color of the bar elements.

BarcodeText parameters

The nested BarcodeText tag exposes parameters that customize the appearance of the Blazor Barcode text:

Parameter	Type	Description
`Color`	`string`
`Font`	`string`
`BarcodeTextMargin`	`object`
`BarcodeTextMargin.Bottom`	`double`
`BarcodeTextMargin.Left`	`double`
`BarcodeTextMargin.Right`	`double`
`BarcodeTextMargin.Top`	`double`
`Visible`	`bool` `true`	If `false`, the Barcode will not display the value as text below the barcode lines.

BarcodeBorder parameters

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

Parameter	Type	Description
`Color`	`string`
`DashType`	`DashType` enum `Solid`
`Width`	`double`

BarcodePadding parameters

The nested BarcodePadding tag exposes parameters that enable you to customize the appearance of the Blazor Barcode:

Parameter	Type	Description
`Bottom`	`double`
`Left`	`double`
`Right`	`double`
`Top`	`double`

Next Steps

Explore the Barcode Encodings