JarCasting
<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
outlinedproperty - Legacy - Anypoint style, use
legacyproperty
<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
