LED CSS Styling

Smart.LED

Smart.LED is a clickable button with three states: checked, unchecked and indeterminate. The element could be used as indicator when is set to readonly.

Required files

The Smart.LED element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • 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.button.js — this file defines the functionality of the Smart.Button custom element. Smart.LED inherits Smart.Button custom element.
  • smart.led.js — this file defines the functionality of the Smart.LED custom element.

Smart.LED also requires the following style sheets in order to be displayed correctly.

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

Initialization

To create an instance of a Smart.LED custom element, insert the following tag in an HTML page:

<smart-led></smart-led>

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

<smart-led checked name="led1" value="5" disabled right-to-left ></smart-led>

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-led');

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 checked = customElement.checked;

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

customElement.checked = true;

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 SmartLed:

  • smart-led – 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-animation – a container used purely for animation.
    • .smart-input – an HTML Span element used as a container for the different contents during state changes.
      • .smart-false-content-container – the content when the LED is OFF.
      • .smart-indeterminate-content-container – the content when the LED is in indeterminate state.
      • .smart-true-content-container – the content when the LED is ON.
    • INPUT element – an HTML Input element used when submiting forms when a value is applied to the element.

CSS variables

Smart.Led uses the following CSS variable:

  • –smart-led-default-width – a CSS variable used to set the default width of the element. Default value is 30px.
  • –smart-led-default-height – a CSS variable used to set the default height of the element. Default value is 30px.

Smart.ListBox

Smart.ListBox is a list box that contains items that can be selected by clicking on them. The keyboard can be used to navigate through the items (dependng on the selection mode).

Required files

The Smart.ListBox element requires the following file references to be placed on a web page in order for the custom element to be successfully registered and properly working:

  • 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.button.js — this file defines the functionality of the Smart.Button custom element. Smart.ScrollBar uses repeat buttons.
  • smart.scrollbar.js — this file defines the functionality of the Smart.ScrollBar custom element.
  • smart.listbox.js — this file defines the functionality of the Smart.ListBox custom element.