Barcode CSS API Reference

All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for Smart.Tank, Smart.Slider and Smart.Gauge.
  • --smart-tick-label-color: Default tick label color for Smart.Tank, Smart.Slider and Smart.Gauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin barcodes, dropdown barcodes.

The following CSS selectors can be used to style a Barcode:

  • smart-barcode-container - the container for the barcode itself. Can be used to set margins and padding for the whole element.
    • .smart-barcode - Either a <svg> or a <canvas> element, depending on the render mode. Can be used to apply border, width and height of the barcode.
    • .smart-barcode-label - When rendering is set to svg, the label element can be customized with CSS

The following properties can be used to style a Barcode:

  • barcode:
    • backgroundColor - applies background color to the entire barcode.
    • lineColor - applies custom color to each barcode bar.
    • lineHeight - applies custom height to each barcode bar.
    • lineWidth - applies custom width to each barcode bar.
  • barcode label:
    • disaplyLabel - sets whether the barcode label is visible.
    • labelColor - applies custom color to the label.
    • labelFont - applies custom font family to the label.
    • labelFontSize - applies custom font size to the label.
    • labelMarginBottom - applies bottom margin to the label.
    • labelMarginTop - applies top margin to the label.
    • labelPosition -sets the position of the label.

Demo

<style>
    .smart-barcode {
        margin-left:auto;
        margin-right:auto;
        display:block;
    }
</style>

<smart-barcode type="codabar" value="A2402B" line-color="red" line-width="4" label-color="red" label-margin-top="0">Button</smart-barcode>