Skip to content

Card

Example#

preview

Code-example#

<measmatic-grid> 
  <measmatic-card highlight-header>
    <measmatic-device-select data-id="control1Id"></measmatic-device-select>
    <measmatic-input data-id="control2Id" unit="V" start-prefix="M" end-prefix="m" label="Voltage"></measmatic-input>
    <measmatic-card__line><span>not predefined Element</span>
      <div style="font-size:50px;">🔬</div>
    </measmatic-card__line>
    <measmatic-card__line><span>element with different width</span>
      <measmatic-input class="flex__item--basis25" data-id="control3Id"></measmatic-input>
    </measmatic-card__line>
    <measmatic-input data-id="control4Id" type="file"></measmatic-input>
    <measmatic-input data-id="control5Id" type="file" label="Filepicker"></measmatic-input>
  </measmatic-card>
  <measmatic-card highlight-header width="300px">
    <measmatic-device-select data-id="control6Id"></measmatic-device-select>
  </measmatic-card>
  <measmatic-card header><span>Header</span>
    <measmatic-device-select data-id="control7Id"></measmatic-device-select>
  </measmatic-card>
  <measmatic-card info><span><b>Infocard</b> <br></span><span>Important informations about controls...</span></measmatic-card>
</measmatic-grid>

Measmatic-card#

This custom-element will generate a card like background to organize measmatic controls.

Structure

<measmatic-card>
  <measmatic-device-select></measmatic-device-select>
</measmatic-card>

The HTML-structure is selfbuilding. If attribute header is set the first child of <measmatic-card> will be appended to <measmatic-card__header. Following childs will be moved to measmatic-card__content. To add a non measmatic element you can wrap your elemnts with <measmatic-card__line> and append it to <measmatic-card__content> or <measmatic-card__header>:

<measmatic-card>
  <measmatic-card__header>
    <measmatic-card__line>
      <!--possible content Here-->
    </measmatic-card__line>
  </measmatic-card__content>
  <measmatic-card__content>
    <measmatic-card__line>
      <!--possible content Here-->
    </measmatic-card__line>
  </measmatic-card__content>
</measmatic-card>
The default percentual width of controls are 60% and can be modified in <measmmatic-card__line> by adding the class flex__item--basis50 (15, 20 ..., 70, 75).

<measmatic-card>
  <measmatic-card__line>
    <span>element with different width</span>
    <measmatic-input class=flex__item--basis25></measmatic-input>
  </measmatic-card__line>
<measmatic-card>

Measmatic-card with attribute highlight-header will highlight the first Element of measmatic-card. 

<measmatic-card highlight-header>

Attributes

  • data-id if used this element will work as container of wrapped elements and accessible via python
  • highlight-header set this attribute to change color of measmatic-card__header - forces Header=true
  • info this attribute will change the background-color for info only cards
  • header When attribute header is set the first child of <measmatic-card> will be appended to <measmatic-card__header. Following childs will be moved to measmatic-card__content.
  • width="300px" set custom width of measmatic card