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
trueExample
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
14Example
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
5Example
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
5Example
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
50Example
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
4Example
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
0Example
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
0Example
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();