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=&quot;100px&quot;" min-height="100px"></measmatic-input-area>
  <measmatic-input-area data-id="textarea9Id" value="" label="max-height=&quot;100px&quot;" max-height="100px"></measmatic-input-area>
  <measmatic-input-area data-id="textarea10Id" value="measmatic-font=&quot;true&quot;" label="measmatic-font" measmatic-font></measmatic-input-area>
  <measmatic-input-area data-id="textarea11Id" value="measmatic-font=&quot;false&quot;" label="measmatic-font"></measmatic-input-area>
  <measmatic-input-area data-id="textarea12Id" value="measmatic-font=&quot;&quot;" label="measmatic-font" measmatic-font=""></measmatic-input-area>
</measmatic-card>

Measmatic-input-area#

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


Attributes

  • data-id required to initialize your control with measmatic
  • value presets a value for controls
  • optional control requires no input
  • 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