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

<api-财产-形式-项目>

以 ARC 视图模型格式输入的输入

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

折旧通知

此元素被移动到 api-forms 仓库和 @api-components/api-forms 软件包。 此元素在迁移完成后会贬值并存档 .

使用量

安装

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

在 html 文件内

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

在一个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);

基础样式

该元素提供了3个基本型式选项:

• 填充 - 材料设计填充样式, 默认样式
• 大纲 - 材料设计概述样式、用途 outlined 属性
• 后遗症 - 任意点样式, 使用 legacy 属性

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

本地运行演示

npm start

运行测试

npm test

API 组件

此组件是 API 生态系统组成部分