Skip to content

Input area

Example#

preview

Code-example#

<measmatic-input-area data-id=textarea-1Id value=VT-34></measmatic-input-area>
<measmatic-card> <span>measmatic-input-area</span>
  <measmatic-input-area data-id=textarea0Id value=VT-34></measmatic-input-area>
  <measmatic-input-area data-id=textarea1Id value="This is a text area with label" label="text area"></measmatic-input-area>
  <measmatic-input-area data-id=textarea2Id value label="required text area"></measmatic-input-area>
  <measmatic-input-area data-id=textarea3Id value label="optional text area" optional=true></measmatic-input-area>
  <measmatic-input-area data-id=textarea4Id value label="horizontal resize" resize=horizontal></measmatic-input-area>
  <measmatic-input-area data-id=textarea5Id value label="vertical resize" resize=vertical></measmatic-input-area>
  <measmatic-input-area data-id=textarea6Id value label="no resize" resize=false></measmatic-input-area>
  <measmatic-input-area data-id=textarea7Id value label=both resize=both></measmatic-input-area>
  <measmatic-input-area data-id=textarea8Id value label='min-height="100px"' min-height=100px></measmatic-input-area>
  <measmatic-input-area data-id=textarea9Id value label='max-height="100px"' max-height=100px></measmatic-input-area>
  <measmatic-input-area data-id=textarea10Id value='measmatic-font="true"' label=measmatic-font measmatic-font></measmatic-input-area>
  <measmatic-input-area data-id=textarea11Id value='measmatic-font="false"' label=measmatic-font></measmatic-input-area>
  <measmatic-input-area data-id=textarea12Id value='measmatic-font=""' label=measmatic-font measmatic-font></measmatic-input-area>
  <measmatic-input-area data-id=textarea13Id value=disabled label=disabled disabled></measmatic-input-area>
</measmatic-card>
<measmatic-card highlight-header>
  <measmatic-input-area data-id=textarea14Id value=highlight-header label=highlight-header></measmatic-input-area>
  <measmatic-input-area data-id=textarea15Id value=content label=content></measmatic-input-area>
</measmatic-card>

Measmatic-input-area#

This custom-element will create an input in form of a text-area.

Attributes

  • data-id required to initialize your control with measmatic
  • value presets a value for controls
  • optional control requires no input
  • disabled disables the text area, can be added or removed at any time
  • label the value of the attribute will create a label
  • resize horizontal/vertical/both/false
  • max-height sets maximum height (default: auto)
  • min-height sets minimum height (default: 40px)
  • measmatic-font will use measmatic font styling inside the text area (false)

Setter/Getter

  • value sets/gets value of input-field
  • disabled sets/gets if the text area is disabled