Skip to content

Input

Example#

preview

Code-example#

<measmatic-grid>
  <measmatic-card>
    <measmatic-input data-id="0"></measmatic-input>
    <measmatic-input data-id="1" label="label"></measmatic-input>
    <measmatic-input data-id="2" unit="V" label="unit='V'"></measmatic-input>
    <measmatic-input data-id="3" unit="V" start-prefix="G" label="GV-V"></measmatic-input>
    <measmatic-input data-id="4" unit="V" end-prefix="n" label="V-nV"></measmatic-input>
    <measmatic-input data-id="5" unit="V" start-prefix="G" end-prefix="n" label="GV-nV"></measmatic-input>
    <measmatic-input data-id="6" selected-prefix="k" unit="V" start-prefix="G" end-prefix="n" label="GV-nV kV"></measmatic-input>
    <measmatic-input data-id="7" type="text" value="zwölf" label="type=text"></measmatic-input>
    <measmatic-input data-id="8" type="number" value="12" label="type=number"></measmatic-input>
    <measmatic-input data-id="9" type="text" value="12" label="label=12"></measmatic-input>
    <measmatic-input data-id="10" type="checkbox" label="type=checkbox"></measmatic-input>
    <measmatic-input data-id="11" type="checkbox" checked label="checked"></measmatic-input>
    <measmatic-input data-id="12" type="checkbox" checked></measmatic-input>
    <measmatic-input data-id="13" type="file" label="File"></measmatic-input>
  </measmatic-card>
</measmatic-grid>

Measmatic-input#

This custom-element will generate a control-element to input data and is based on HTMLInputElement. To organize Inputs you can use measmatic-card.

Structure

<measmatic-input data-id="controlId1" type="number" value="1" label="input number"></measmatic-input>

The HTML-structure is selfbuilding and editable by adding attributes.

Attributes

  • data-id required to initialize your control with measmatic
  • type supported types are number(=float), float (default), integer (blocks the use of units), text, file,and checkbox(blocks the use of units and variables), integer
  • label creates a label at the left site of the control with the given attribute data
  • checked checkes control when type=checkbox
  • value presets a value for controls with the type of number, file or text
  • unit sets the baseunit and will activate the usage of measmatic-unit
  • start-prefix selects the largest choosable prefix
  • end-prefix selects the smallest choosable prefix
  • selected-prefix selected-prefix="" will select base (no prefix)
  • variables creates a button to look up given variables from your excisting tests (default = true) variables="false" will deactivate the variables button

Properties of interest

  • to access setter/getter of contained childs
  • element.inputField returns the contained measmatic-input-field element
  • element.inputUnit returns the contained measmatic-input-unit element
  • element.inputVariable returns the contained measmatic-input-variable element