Barcode JAVASCRIPT UI Component API

Barcode Javascript API

Class

Barcode

Barcodes encodes text value in a specific pattern.

Selector

smart-barcode

Properties

Events

Methods

Properties

backgroundColorstring

Sets the background color of the barcode element.

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

Sets whether the barcode label is visible.

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

Sets the color of the barcode label.

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

Sets the font family of the barcode label.

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

Sets the font size of the barcode label.

Default value

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

Sets the bottom margin of the barcode label.

Default value

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

Sets the top margin of the barcode label.

Default value

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"

Sets the position of the barcode label.

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

Sets the color of the barcode lines.

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

Sets the height of the barcode line.

Default value

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

Sets the width of the barcode line.

Default value

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"

Sets the rendering mode of the 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"

Sets the barcode type

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

Sets or gets the value of the barcode.

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

Sets or gets the width of the barcode. If the width is set to 0, the width of the barcode is calculated automatically.

Default value

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

Sets or gets the height of the barcode. If the height is set to 0, the height of the barcode is calculated automatically.

Default value

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 when the value of the barcode is invalid.

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

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

Gets the base64 string of the barcode

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

Gets the base64 string of the barcode

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

Gets the validity of the barcode

Returnsboolean

Invoke the isValid method.

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