JSPM – @api-components/api-property-form-item@3.0.16

Package Exports

@api-components/api-property-form-item
@api-components/api-property-form-item/api-property-form-item.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@api-components/api-property-form-item) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<api-property-form-item>

An input to use with forms to render inputs based in ARC view-model

<api-property-form-item model='{"schema":{"inputLabel": "Enter number value", "inputType": "number", "minimum": 1, "maximum": 100}}' name="numericModel" value="1"></api-property-form-item>

Deprecation notice

This element is moved to api-forms repository and @api-components/api-forms package. This element will be deprecated and archived once the migration finish.

Usage

Installation

npm install --save @api-components/api-property-form-item

In an html file

<html>
  <head>
    <script type="module">
      import '@api-components/api-property-form-item/api-property-form-item.js';
    </script>
  </head>
  <body>
    <api-property-form-item name="numericModel" value="1"></api-property-form-item>
    <script>
    {
      document.querySelector('api-property-form-item').model = {
        schema: {
          inputLabel: 'Enter number value',
          inputType: 'number',
          minimum: 1,
          maximum: 100
        }
      };
    }
    </script>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/api-property-form-item/api-property-form-item.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <api-property-form-item
      name="numericModel"
      value="1"
      .model="${this.inputModel}"
      @changed="${this._handleHande}"></api-property-form-item>
    `;
  }

  _handleHande(e) {
    this.inputValue = e.target.value;
  }
}
customElements.define('sample-element', SampleElement);

Base styles

The element provides 3 basic styling options:

Filled - Material design filled style, default style
Outlined - Material design outlined style, use outlined property
Legacy - Anypoint style, use legacy property

<api-property-form-item outlined></api-property-form-item>
<api-property-form-item legacy></api-property-form-item>

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem