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

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

2. Set the Value property.

3. Set the Height and Width properties.

4. 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

See Also

• Live Demo: Barcode
• Live Demo: Barcode Encoding