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.

dotnet add 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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Barcode />