@api-components/api-property-form-item
Version:
An input to use with forms to render inputs based in ARC view-model
104 lines (78 loc) • 2.59 kB
Markdown
[](https://www.npmjs.com/package/@api-components/api-property-form-item)
[](https://travis-ci.org/advanced-rest-client/api-property-form-item)
## <api-property-form-item>
An input to use with forms to render inputs based in ARC view-model
```html
<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
```sh
npm install --save @api-components/api-property-form-item
```
### In an html file
```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>
```
### In a LitElement
```js
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
```html
<api-property-form-item outlined></api-property-form-item>
<api-property-form-item legacy></api-property-form-item>
```
## Running the demo locally
```sh
npm start
```
## Running the tests
```sh
npm test
```
## API components
This components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)