Barcode JAVASCRIPT UI Component API

Barcode Javascript API

Class

Barcode

Barcode

Barcodes encodes text value in a specific pattern.

Selector

smart-barcode

Properties

BbackgroundColorDefines the background color that appears behind the barcode element. This setting determines the color fill for the area surrounding and underneath the barcode, helping to improve contrast and overall barcode visibility. Accepts color values in standard CSS formats (e.g., hex, RGB, or color names).
DdisplayLabelDetermines whether the barcode label is displayed on the interface. When set to true, the barcode label will be visible; when set to false, the label will be hidden.
LlabelColorSpecifies the color used for the text label displayed below or alongside the barcode. This color determines how the label appears to users and can be set using standard color values, such as hex codes (e.g., #000000 for black) or color names (e.g., "red").
LlabelFontSpecifies the font family to be used for displaying the text on the barcode label. This determines the appearance of the label's text by applying the selected font style.
LlabelFontSizeSpecifies the font size used for the text displayed on the barcode label, allowing you to control the readability and appearance of the label’s text. Accepts standard CSS font size units such as px, em, rem, or pt.
LlabelMarginBottomSpecifies the amount of space, in pixels or other units, to be applied as the margin below the barcode label. This determines the distance between the bottom edge of the barcode label and any content or elements directly beneath it.
LlabelMarginTopSpecifies the amount of space added to the top of the barcode label by setting the top margin. This determines how far the label is positioned from the top edge of its container or surrounding elements. Accepts values in units such as pixels (px), em, or percentages (%).
LlabelPositionSpecifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements.
LlineColorSpecifies the color to be used for the barcode lines or bars, allowing you to customize the appearance of the barcode by changing its foreground color. This setting does not affect the background color of the barcode. Use a valid color value (e.g., HEX, RGB, or color name) as supported by your implementation.
LlineHeightSpecifies the height, in pixels, of each individual barcode line. Increasing this value will make the barcode lines taller, while decreasing it will reduce their height. This property is useful for adjusting the overall visibility and scannability of the barcode.
LlineWidthSpecifies the thickness of each individual bar in the barcode, allowing you to control how wide the printed barcode lines appear. Adjusting this value can help improve barcode readability for different scanners and printing methods.
RrenderAsSpecifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode.
TtypeSpecifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode.
VvalueRetrieves the current value of the barcode or updates it with a new value. This property allows you to access the existing barcode data or assign a new barcode value programmatically.
WwidthSpecifies or retrieves the width of the barcode in pixels. If the width is set to 0, the barcode’s width will be automatically calculated based on its content and type. Use this property to define a fixed width for the barcode, or set it to 0 to allow automatic sizing for optimal readability.
HheightDefines or retrieves the height of the barcode, in pixels. When a value of 0 is assigned, the barcode's height will be determined automatically based on its content and format, ensuring optimal sizing without manual specification. If a positive value is provided, the barcode will be rendered at that exact height.

Events

IinvalidThis event is triggered whenever the scanned or entered barcode value does not meet the required validation criteria. It typically occurs when the barcode is missing, formatted incorrectly, or contains unsupported characters, allowing you to handle validation errors and provide appropriate feedback to the user.

Methods

EexportExports the generated barcode image or data for use outside the application. This function typically saves or downloads the barcode in formats such as PNG, JPEG, or SVG, making it accessible for printing, sharing, or integration with other systems.
GgetDataURLRetrieves the barcode image encoded as a Base64 string, allowing for convenient embedding or transmission of the barcode in web applications or APIs without needing a physical image file.
GgetDataURLAsyncRetrieves the barcode image encoded as a Base64 string, allowing you to easily embed or transmit the barcode in formats such as HTML, CSS, or JSON.
IisValidRetrieves the validation status of the barcode, indicating whether the scanned barcode meets the required format and integrity checks.

Properties

backgroundColorstring

Defines the background color that appears behind the barcode element. This setting determines the color fill for the area surrounding and underneath the barcode, helping to improve contrast and overall barcode visibility. Accepts color values in standard CSS formats (e.g., hex, RGB, or color names).

Default value

"white"

Example

Set the backgroundColor property. 

 <smart-barcode background-color='white'></smart-barcode>

Set the backgroundColor property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.backgroundColor = 'yellow';

Get the backgroundColor property. 

 const barcode = document.querySelector('smart-barcode');
 let backgroundColor = barcode.backgroundColor;

displayLabelboolean

Determines whether the barcode label is displayed on the interface. When set to true, the barcode label will be visible; when set to false, the label will be hidden.

Default value

true

Example

Set the displayLabel property. 

 <smart-barcode display-label></smart-barcode>

Set the displayLabel property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.displayLabel = true;

Get the displayLabel property. 

 const barcode = document.querySelector('smart-barcode');
 let displayLabel = barcode.displayLabel;

labelColorstring

Specifies the color used for the text label displayed below or alongside the barcode. This color determines how the label appears to users and can be set using standard color values, such as hex codes (e.g., #000000 for black) or color names (e.g., "red").

Default value

"black"

Example

Set the labelColor property. 

 <smart-barcode label-color='white'></smart-barcode>

Set the labelColor property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.labelColor = 'red';

Get the labelColor property. 

 const barcode = document.querySelector('smart-barcode');
 let labelColor = barcode.labelColor;

labelFontstring

Specifies the font family to be used for displaying the text on the barcode label. This determines the appearance of the label's text by applying the selected font style.

Default value

"monospace"

Example

Set the labelFont property. 

 <smart-barcode label-font='monospace'></smart-barcode>

Set the labelFont property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.labelFont = 'sans-serif';

Get the labelFont property. 

 const barcode = document.querySelector('smart-barcode');
 let labelFont = barcode.labelFont;

labelFontSizenumber

Specifies the font size used for the text displayed on the barcode label, allowing you to control the readability and appearance of the label’s text. Accepts standard CSS font size units such as px, em, rem, or pt.

Default value

14

Example

Set the labelFontSize property. 

 <smart-barcode label-font-size='14'></smart-barcode>

Set the labelFontSize property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.labelFontSize = 10;

Get the labelFontSize property. 

 const barcode = document.querySelector('smart-barcode');
 let labelFontSize = barcode.labelFontSize;

labelMarginBottomnumber

Specifies the amount of space, in pixels or other units, to be applied as the margin below the barcode label. This determines the distance between the bottom edge of the barcode label and any content or elements directly beneath it.

Default value

5

Example

Set the labelMarginBottom property. 

 <smart-barcode label-margin-bottom='5'></smart-barcode>

Set the labelMarginBottom property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.labelMarginBottom = 0;

Get the labelMarginBottom property. 

 const barcode = document.querySelector('smart-barcode');
 let labelMarginBottom = barcode.labelMarginBottom;

labelMarginTopnumber

Specifies the amount of space added to the top of the barcode label by setting the top margin. This determines how far the label is positioned from the top edge of its container or surrounding elements. Accepts values in units such as pixels (px), em, or percentages (%).

Default value

5

Example

Set the labelMarginTop property. 

 <smart-barcode label-margin-top='5'></smart-barcode>

Set the labelMarginTop property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.labelMarginTop = 5;

Get the labelMarginTop property. 

 const barcode = document.querySelector('smart-barcode');
 let labelMarginTop = barcode.labelMarginTop;

labelPosition"top" | "bottom"

Specifies the exact placement of the barcode label relative to the barcode image, allowing you to control where the label appears (e.g., above, below, left, or right of the barcode). This property ensures the label is positioned according to your layout requirements.

Default value

"bottom"

Example

Set the labelPosition property. 

 <smart-barcode label-position='bottom'></smart-barcode>

Set the labelPosition property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.labelPosition = 'top';

Get the labelPosition property. 

 const barcode = document.querySelector('smart-barcode');
 let labelPosition = barcode.labelPosition;

lineColorstring

Specifies the color to be used for the barcode lines or bars, allowing you to customize the appearance of the barcode by changing its foreground color. This setting does not affect the background color of the barcode. Use a valid color value (e.g., HEX, RGB, or color name) as supported by your implementation.

Default value

"black"

Example

Set the lineColor property. 

 <smart-barcode line-color='balck'></smart-barcode>

Set the lineColor property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.lineColor = 'green';

Get the lineColor property. 

 const barcode = document.querySelector('smart-barcode');
 let lineColor = barcode.lineColor;

lineHeightnumber

Specifies the height, in pixels, of each individual barcode line. Increasing this value will make the barcode lines taller, while decreasing it will reduce their height. This property is useful for adjusting the overall visibility and scannability of the barcode.

Default value

50

Example

Set the lineHeight property. 

 <smart-barcode line-height='50'></smart-barcode>

Set the lineHeight property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.lineHeight = 60;

Get the lineHeight property. 

 const barcode = document.querySelector('smart-barcode');
 let lineHeight = barcode.lineHeight;

lineWidthnumber

Specifies the thickness of each individual bar in the barcode, allowing you to control how wide the printed barcode lines appear. Adjusting this value can help improve barcode readability for different scanners and printing methods.

Default value

4

Example

Set the lineWidth property. 

 <smart-barcode line-width='4'></smart-barcode>

Set the lineWidth property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.lineWidth = 6;

Get the lineWidth property. 

 const barcode = document.querySelector('smart-barcode');
 let lineWidth = barcode.lineWidth;

renderAs"svg" | "canvas"

Specifies the rendering mode used to display the barcode, determining whether it is generated as a vector graphic (such as SVG), a raster image (such as PNG), or using another supported format. This setting affects the appearance, scalability, and performance of the rendered barcode.

Default value

"svg"

Example

Set the renderAs property. 

 <smart-barcode render-as='svg'></smart-barcode>

Set the renderAs property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.renderAs = 'canvas';

Get the renderAs property. 

 const barcode = document.querySelector('smart-barcode');
 let renderAs = barcode.renderAs;

type"pharmacode" | "codabar" | "code128a" | "code128b" | "code128c" | "msi" | "msi10" | "msi11" | "msi1010" | "msi1110" | "ean13" | "ean8" | "code39" | "code93"

Specifies the format or symbology of the barcode to be generated (e.g., Code128, QR Code, EAN-13, UPC-A). This determines how the data will be encoded and displayed within the barcode.

Default value

"codabar"

Example

Set the type property. 

 <smart-barcode type='codabar'></smart-barcode>

Set the type property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.type = 'code128b';

Get the type property. 

 const barcode = document.querySelector('smart-barcode');
 let type = barcode.type;

valuestring

Retrieves the current value of the barcode or updates it with a new value. This property allows you to access the existing barcode data or assign a new barcode value programmatically.

Default value

""

Example

Set the value property. 

 <smart-barcode value='A2402B'></smart-barcode>

Set the value property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.value = 'example';

Get the value property. 

 const barcode = document.querySelector('smart-barcode');
 let value = barcode.value;

widthnumber

Specifies or retrieves the width of the barcode in pixels. If the width is set to 0, the barcode’s width will be automatically calculated based on its content and type. Use this property to define a fixed width for the barcode, or set it to 0 to allow automatic sizing for optimal readability.

Default value

0

Example

Set the width property. 

 <smart-barcode width='10'></smart-barcode>

Set the width property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.width = null;

Get the width property. 

 const barcode = document.querySelector('smart-barcode');
 let width = barcode.width;

heightnumber

Defines or retrieves the height of the barcode, in pixels. When a value of 0 is assigned, the barcode's height will be determined automatically based on its content and format, ensuring optimal sizing without manual specification. If a positive value is provided, the barcode will be rendered at that exact height.

Default value

0

Example

Set the height property. 

 <smart-barcode height='10'></smart-barcode>

Set the height property by using the HTML Element's instance. 

 const barcode = document.querySelector('smart-barcode');
 barcode.height = null;

Get the height property. 

 const barcode = document.querySelector('smart-barcode');
 let height = barcode.height;

Events

invalidCustomEvent

This event is triggered whenever the scanned or entered barcode value does not meet the required validation criteria. It typically occurs when the barcode is missing, formatted incorrectly, or contains unsupported characters, allowing you to handle validation errors and provide appropriate feedback to the user.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onInvalid

Arguments

evCustomEvent
ev.detailObject
ev.detail.invalidCharacters - An array indicating the invalid characters.
ev.detail.lengthValidity - A boolean indicating the length validity.
ev.detail.patternValidity - A boolean indicating the pattern validity.
ev.detail.value - the invalid value of the barcode.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of invalid event. 

const barcode = document.querySelector('smart-barcode');
barcode.addEventListener('invalid', function (event) {
    const detail = event.detail,
        invalidCharacters = detail.invalidCharacters,
        lengthValidity = detail.lengthValidity,
        patternValidity = detail.patternValidity,
        value = detail.value;

	// event handling code goes here.
})

Methods

export( format: string, fileName?: string): void

Exports the generated barcode image or data for use outside the application. This function typically saves or downloads the barcode in formats such as PNG, JPEG, or SVG, making it accessible for printing, sharing, or integration with other systems.

Arguments

formatstring

The format of the exported file - svg, png, jpg

fileName?string

The name of the exported file


Invoke the export method.

const barcode = document.querySelector('smart-barcode');
barcode.export();

getDataURL( format: string): string

Retrieves the barcode image encoded as a Base64 string, allowing for convenient embedding or transmission of the barcode in web applications or APIs without needing a physical image file.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsstring

Invoke the getDataURL method.

const barcode = document.querySelector('smart-barcode');
const result = barcode.getDataURL("svg","png");

getDataURLAsync( format: string): object

Retrieves the barcode image encoded as a Base64 string, allowing you to easily embed or transmit the barcode in formats such as HTML, CSS, or JSON.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsobject

Invoke the getDataURLAsync method.

const barcode = document.querySelector('smart-barcode');
const result = barcode.getDataURLAsync("svg","png");

isValid(): boolean

Retrieves the validation status of the barcode, indicating whether the scanned barcode meets the required format and integrity checks.

Returnsboolean

Invoke the isValid method.

const barcode = document.querySelector('smart-barcode');
const result = barcode.isValid();