Bar Code

Overview

The Avonni Bar Code Component is designed to enable the generation and customization of various barcode types, providing a rich visual representation of data in a scannable format.

Through this component, users can craft barcodes with a wide range of specifications. Each barcode can be fine-tuned, offering customization options like the type of barcode, dimensions, colors, and display properties. This ensures that the generated barcodes align with your website's specific needs and aesthetic considerations.

Configuring the barcode

Customizing the barcode value

The value for the barcode can be set in two ways. Firstly, you can manually enter the desired value for the barcode. Alternatively, the value can be sourced from one of your existing collections. To use a value from a collection, switch to the 'Mapped' input option and select the appropriate collection as your source.

Switch to Mapped input field to select a source collection as a value.

Choosing the barcode type

The Barcode component renders more than 150 different types of barcodes. Select the one you need.

Main types of Barcode supported

Specifications

🎛️ Properties

Name	Description	Usage
Type	Select the barcode type to be generated.	Choose the appropriate barcode symbology based on the use-case or industry standard.
Value	The data to be encoded into the barcode.	Enter the value that needs to be translated into barcode form.
Checksum	A boolean option to enable or disable the calculation of a checksum digit.	Toggle on to include a checksum digit in the barcode, providing an additional layer of data integrity.
Width	Define the width of the barcode.	Adjust the width based on the design considerations of your webpage or the physical constraints of the printed medium.
Height	Define the height of the barcode.	Customize the height to ensure that the barcode fits well within the allocated space and is easily scannable.
Hide Value	A boolean option to show or hide the encoded value beneath the barcode.	Toggle on to hide the numeric or alphanumeric value represented by the barcode, providing a cleaner visual presentation.

🎨 Appareance

Name	Description	Usage
Background Color	Set the background color of the barcode component.	Choose a color that ensures good contrast with the barcode lines and numbers, ensuring readability and scannability.
Color	Set the color of the barcode lines and text.	Select a color that stands out against the background, optimizing visibility.
Text Alignment	Define the alignment of the text displayed below the barcode.	Adjust the text alignment to harmonize with the overall design and layout of the webpage or printed material.
Text Color	Set the color of the text displayed below the barcode.	Choose a color that is easily readable against the background color, ensuring that the encoded value is visually accessible.