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
andWidth
properties.-
Optionally, choose a
Type
(one of the encodings we support).- Its default encoding is
Code39
.
- Its default encoding is
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 |