Added in v2.2

Blazorise Barcode component

Generate linear and two-dimensional barcodes such as Code 128, EAN, QR Code, Data Matrix, PDF417, and Aztec.

The Barcode component renders barcode images from a value and a symbology. It can render to canvas or SVG and exposes Blazorise-friendly parameters so the underlying generator can be replaced without changing the main component API.

To use the Barcode component, install the Blazorise.Barcode package first.

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.Barcode

Imports

In your main _Imports.razor add:

@using Blazorise.Barcode

Examples

Basic

Define a Value and choose the barcode Type.

<Barcode Value="0123456789" Type="BarcodeType.Code128" ShowValue SymbolHeight="20" />

Barcode Types

Use Type to render different symbologies.

Code 128

EAN-13

QR Code

Data Matrix

<Grid Columns="GridColumns.Are1.OnTablet.Are2.OnDesktop">
    <Column>
        <Div Flex="Flex.Column" Gap="Gap.Is2">
            <Text TextWeight="TextWeight.SemiBold">Code 128</Text>
            <Barcode Value="0123456789" Type="BarcodeType.Code128" ShowValue SymbolHeight="16" />
        </Div>
    </Column>
    <Column>
        <Div Flex="Flex.Column" Gap="Gap.Is2">
            <Text TextWeight="TextWeight.SemiBold">EAN-13</Text>
            <Barcode Value="5901234123457" Type="BarcodeType.Ean13" ShowValue SymbolHeight="16" />
        </Div>
    </Column>
    <Column>
        <Div Flex="Flex.Column" Gap="Gap.Is2">
            <Text TextWeight="TextWeight.SemiBold">QR Code</Text>
            <Barcode Value="https://blazorise.com" Type="BarcodeType.QrCode" SymbolWidth="32" SymbolHeight="32" />
        </Div>
    </Column>
    <Column>
        <Div Flex="Flex.Column" Gap="Gap.Is2">
            <Text TextWeight="TextWeight.SemiBold">Data Matrix</Text>
            <Barcode Value="Blazorise" Type="BarcodeType.DataMatrix" SymbolWidth="32" SymbolHeight="32" />
        </Div>
    </Column>
</Grid>

Styling

Use colors, value visibility, and value alignment to adjust the barcode output.

<Barcode Value="BLAZORISE"
         Type="BarcodeType.Code128"
         RenderMode="BarcodeRenderMode.Svg"
         ForegroundColor="#7474ed"
         BackgroundColor="#f7f7ff"
         ShowValue
         ValueAlignment="BarcodeValueAlignment.End"
         SymbolHeight="20"
         PaddingTop="8"
         PaddingEnd="8"
         PaddingBottom="8"
         PaddingStart="8" />

Target Dimensions

SymbolWidth and SymbolHeight define the requested barcode symbol dimensions. The provider can render a smaller symbol when it needs to keep a valid module size.

<Barcode Value="5901234123457"
         Type="BarcodeType.Ean13"
         RenderMode="BarcodeRenderMode.Canvas"
         ShowValue
         SymbolWidth="45"
         SymbolHeight="18"
         Scale="3" />

API

Parameters

Parameter	Description	Type	Default
`BackgroundColor`	Color used as background color.	`string`	`"#ffffff"`
`ForegroundColor`	Color used as foreground color.	`string`	`"#000000"`
`PaddingBottom`	Defines the bottom padding inside the generated barcode image.	`int?`	`null`
`PaddingEnd`	Defines the end padding inside the generated barcode image.	`int?`	`null`
`PaddingStart`	Defines the start padding inside the generated barcode image.	`int?`	`null`
`PaddingTop`	Defines the top padding inside the generated barcode image.	`int?`	`null`
`RenderMode`	Defines how the barcode will be rendered. Possible values:`Canvas`, `Svg`	`BarcodeRenderMode`	`BarcodeRenderMode.Canvas`
`Rotation`	Defines the barcode rotation. Possible values:`None`, `Right`, `Left`, `Inverted`	`BarcodeRotation`	`BarcodeRotation.None`
`Scale`	Defines the barcode scale.	`int`	`2`
`ShowValue`	Defines whether the encoded value should be shown as human-readable text.	`bool`	`false`
`SymbolHeight`	Defines the requested barcode symbol height. The provider preserves valid module sizing, so the rendered symbol can be smaller than this value.	`int?`	`null`
`SymbolWidth`	Defines the requested barcode symbol width. The provider preserves valid module sizing, so the rendered symbol can be smaller than this value.	`int?`	`null`
`Type`	The barcode symbology. Possible values:`QrCode`, `DataMatrix`, `Aztec`, `CodablockF`, `MaxiCode`, `MicroPdf417`, `Pdf417`, `HanXin`, `DotCode`, `Mailmark`, `Code128`, `Code39`, `Code93`, `Codabar`, `Ean13`, `Ean8`, `Interleaved2Of5`, `Itf14`, `Msi`, `Pharmacode`, `UpcA`, `UpcE`	`BarcodeType`	`BarcodeType.Code128`
`Value`	Value used for barcode generation.	`string`
`ValueAlignment`	Defines the alignment of the human-readable value text. Possible values:`Start`, `Center`, `End`	`BarcodeValueAlignment`	`BarcodeValueAlignment.Center`