Narcoleptic Pony Machine

    @api-components/api-property-form-item
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.16 • Public • Published

    Published on NPM

    Build Status

    <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

    Install

    npm i @api-components/api-property-form-item

    DownloadsWeekly Downloads

    324

    Version

    3.0.16

    License

    Apache-2.0

    Unpacked Size

    108 kB

    Total Files

    12

    Last publish

    Collaborators

    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret