scan-barcode
Last updated
Last updated
scan-barcode
launches the barcode scanner which opens a camera view with which app users can scan codes.
bind
label
required
align-content
align-label
allow-manual-entry
Optional
Type: boolean
Default: true
On unsupported devices, a text input dialog will display for users to manually enter the data. This dialog can be skipped by setting allow-manual-entry
to false
.
color
Optional
Type: string
- can be a named color or #HEX value
Default: primary
The main color of the scan-barcode
button: Background color of a solid
button; border and text color of an outline
button.
disabled
disabled-message
Optional
Type: string
(static text, a format string or the return value of a JS/TS function)
Default: unset
When the disabled
attribute is set to true
the component will display the bound state and direct interactions blocked. The component will appear greyed-out. A message will display indicating the message specified.
extensions
Optional
Type: EAN_2
, EAN_5
Comma-separated list of barcode type extensions.
icon
Optional
Type: string
Default: Barcode Scanner Icon
The icon to display on the button, it will be placed on the left of the label by default. The icon can be a Font Awesome icon, an Ionicons icon or an icon or image asset.
icon-color
Optional
Type: string
Default: the component's text-color
Specify the color of the button's icon. The icon-color
attribute can be a named text-color or #HEX value.
icon-position
id
label-case
label-color
on-change
and on-scan
prompt
Optional
Type: string
Default: unset
Prompt text to display on the barcode scanning screen. Message will also display on the manual fallback dialog.
show-if
and hide-if
style
Optional
Type: solid
| outline
Default: solid
The scan-barcode
button style conveys importance of a button to the user, and can be set to solid
or outline
.
text-color
Optional
Type: string
- can be a named color or #HEX value
Default: If the button's color
is a named color, its text color defaults to the _text
counterpart of the named color. If the button's color
is a #HEX value, its text color defaults to a high contrasting color.
Specify the color of the scan-barcode
button's label.
types
Optional
Comma-separated list of barcode types to attempt to scan.
Product barcodes:
UPC_A
, UPC_E
, EAN_8
, EAN_13
, RSS_14
(all variants), RSS_EXPANDED
(most variants).
UPC_A
, UPC_E
, EAN_8
, EAN_13
Other 1D barcodes:
CODE_39
, CODE_93
, CODE_128
, ITF
, CODABAR
CODE_39
, CODE_128
2D barcodes:
QR_CODE
, DATA_MATRIX
, AZTEC
(beta quality), PDF_417
QR_CODE
, DATA_MATRIX
The following component methods are available when an id
is assigned to the component and component.scanBarcode({id:'my-id'})
is called from JS/TS:
scanBarcode
Programmatically opens the barcode scanner to allow the user to capture a barcode bound to the scan-barcode
component.
scrollIntoView
Programmatically scroll until the scan-barcode
component is visible in the view.