Barcode component offers the capability to create diverse barcode types with Okapi in both PNG and SVG formats. For browsers lacking SVG support, the component automatically defaults to PNG format.
<dependency>
<groupId>uk.org.okapibarcode</groupId>
<artifactId>okapibarcode</artifactId>
<version>0.5.0</version>
</dependency>
<div class="card">
<div class="grid">
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">Interleaved 2 of 5</div>
<p:barcode value="0123456789" type="int2of5" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">Codabar</div>
<p:barcode value="A123456B" type="codabar" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">Code39</div>
<p:barcode value="0123456789" type="code39" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">Code128</div>
<p:barcode value="0123456789" type="code128" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">EAN-8</div>
<p:barcode value="12345670" type="ean8" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">EAN-13</div>
<p:barcode value="1234567890128" type="ean13" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">UPC-A (PNG)</div>
<p:barcode value="012345678958" type="upca" format="png" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">UPC-E (Vertical)</div>
<p:barcode value="0123456" type="upce" orientation="90" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">PDF417</div>
<p:barcode value="0123456789" type="pdf417" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">DataMatrix</div>
<p:barcode value="0123456789" type="datamatrix" magnification="3.0" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">Postnet</div>
<p:barcode value="0123456789" type="postnet" magnification="3.0" styleClass="max-w-full"/>
</div>
<div class="col-12 sm:col-6 lg:col-4">
<div class="mb-2">QR</div>
<p:barcode value="0123456789" type="qr" width="125" height="125" styleClass="max-w-full"/>
</div>
</div>
</div>