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__header>
  <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 <measmatic-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