Skip to content

Select

Example#

preview

Code-example#

<measmatic-grid>
  <measmatic-card data-id=card1>       
    <measmatic-select options='["Sweep","Step","Bias"]' selected=Bias data-id=controlId1></measmatic-select>
    <measmatic-select options='["Sweep","Step","Bias"]' selected=Bias label=Operation data-id=controlId2></measmatic-select>
    <measmatic-select options='["Voltage","Current"]' label=Mode data-id=controlId3></measmatic-select>
    <measmatic-select options='["Voltage","Current"]' label=disabled data-id=controlId4 disabled></measmatic-select>
  </measmatic-card>
  <measmatic-card highlight-header>
    <measmatic-select options='["Voltage","Current"]' label=highlight-header data-id=controlId5></measmatic-select>
    <measmatic-select options='["Voltage","Current"]' label=content data-id=controlId6></measmatic-select>
  </measmatic-card>
</measmatic-grid>

Measmatic-select#

This custom-element will generate a control-element to select a value from a predefined set of values and it is based on HTMLSelectElement. To organize selects you can use measmatic-card.

Structure

<measmatic-select options='["Sweep","Step","Bias"]' selected="Bias" label="Operation" data-id="controlId2"></measmatic-select>

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

Attributes

  • data-id required to initialize your control with measmatic
  • label creates a label at the left site of the control with the given attribute data
  • selected preselect a value by default
  • options defines the selectable values
  • disabled disables the select-element, can be added or removed at any time

Setter/Getter

  • value sets/gets selected value of select-element
  • disabled sets/gets if the select-element is disabled