MultiSplitButton CSS Styling

Smart.MultiSplitButton is a basic text input that accepts keyboard input, optionally includes increment decrement buttons, and can display numeric data in a variety of different formats.

Required files

Smart.MultiSplitButton requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js — this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.numerictextbox.js — this file defines the functionality of the Smart.MultiSplitButton custom element.
  • smart.button.js — this file contains the smart-repeat-button custom element. The spin buttons of Smart.MultiSplitButton are instances of smart-repeat-button.
  • smart.numeric.js — this file contains functions used for the processing of numeric objects.
  • smart.math.js — this file contains many of the mathematical functions used by the Smart.MultiSplitButton custom element.
  • smart.complex.js — this file is necessary for the complex number support of the Smart.MultiSplitButton custom element. It is part of the repository ni-kismet/data-types.

Smart.MultiSplitButton also requires the following style sheet in order to be displayed correctly.

  • smart.base.css — the base style sheet file.

Initialization

To initialize (instantiate) a Smart.MultiSplitButton custom element, insert the following tag in an HTML page:

<smart-numeric-text-box></smart-numeric-text-box>

To set properties of the custom element initially, do so by setting the respective attributes of the tag, e.g.:

<smart-numeric-text-box input-format="floatingPoint" spin-buttons min="5" max="10"></smart-numeric-text-box>

Getting and setting properties dynamically

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-numeric-text-box');

Properties are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let min = customElement.min;

Here is an example showing how to set a property dynamically:

customElement.min = 0;

Calling methods

Before accessing the custom element’s API in JavaScript, the custom element’s instance has to be retrieved:

let customElement = document.querySelector('smart-numeric-text-box');

Methods are represented as members of the custom element’s instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.val('inf');

Styling (CSS API)

Smart HTML Elements use a pair of css files – smart.base.css and smart.[theme name].css. The base stylesheet creates the styles related to the element’s layout like margin, padding, border-width, position. The second CSS file applies the HTML Element’s colors, fonts, borders and backgrounds. The smart.base.css should be included before the second CSS file.

CSS selectors

The following CSS selectors can be used to style Smart.MultiSplitButton:

  • smart-numeric-text-box – the element itself. Can be used to set width and height for the whole element.
    • .smart-container – the container that holds all of the internals of the element. Shoudn’t be used for styling.
    • .smart-numeric-text-box-radix-display – a DIV element used to display the radix.
    • INPUT element – an HTML Input element used for the user input.
    • .smart-numeric-text-box-unit-display – a DIV element used to display the unit.
    • .smart-spin-buttons-container – a container for the spin buttons.
      • .smart-spin-button – a Smart.RepeatButton used to increment the value.
      • .smart-arrow-up – arrow up container.
      • .smart-spin-button – a second Smart.RepeatButton used to decrement the value.
      • .smart-arrow-up – arrow down container.
    • .smart-drop-down – a UL element that represents the dropdown with radix selection.
      • .smart-list-item – a list item (LI element).

CSS variables

Smart.MultiSplitButton uses the following CSS variables:

  • –smart-numeric-text-box-default-width – used to set the default width of the element. Default value is 150px.
  • –smart-numeric-text-box-default-height – used to set the default height of the element. Default value is 30px.
  • –smart-numeric-text-box-spin-buttons-default-width – used to set the default width of the spin buttons inside the Numeric text box. Default value is 18px.
  • –smart-numeric-text-box-default-radix-display-width – used to set the default width of the radix display inside the Numeric text box. Default value is 12%.
  • –smart-numeric-text-box-default-unit-display-width – used to set the default width of the unit display inside the Numeric text box. Default value is 28px.