|
1 | 1 | # json-form-custom-element
|
2 | 2 | https://www.webcomponents.org/element/json-form-custom-element
|
3 | 3 |
|
4 |
| -Sole purpose of this repo is to facilitate web component maintenance: |
| 4 | +## Install |
| 5 | + |
| 6 | +You can either use unpkg.com CDN |
| 7 | + |
| 8 | +```html |
| 9 | +<script src="//unpkg.com/json-form-custom-element"></script> |
| 10 | +``` |
| 11 | + |
| 12 | +or as a dependency, in es6 |
| 13 | + |
| 14 | +```javascript |
| 15 | +import 'json-form-custom-element' |
| 16 | +``` |
| 17 | + |
| 18 | +## Usage |
| 19 | + |
| 20 | +```html |
| 21 | +<json-form schema='{}' value='{}' config='{}'></json-form> |
| 22 | +``` |
| 23 | + |
| 24 | +Attributes: |
| 25 | +- schema, strinigified json schema, which may contain some additional ui specifications, see https://json-tools.github.io/json-form/ for example of `schema` configurations |
| 26 | +- value, strinigified json value |
| 27 | +- config, stringified json object which may contain these properties |
| 28 | + - dense: true | false (boolean) - choose between dense and regular layout |
| 29 | + - textFieldStyle: "outlined" | "filled" (string) - style of text fields |
| 30 | + - name: (string) - name of a form, should be unique on the page, used to generate unique ids of form elements |
| 31 | + |
| 32 | +Styles: |
| 33 | + - `--object-heading-indent`: padding of a heading of a nested object, default `0px` |
| 34 | + - `--nested-object-padding`: padding of a nested object, default `0px` |
| 35 | + - `--form-background`: background of a form, default `#fafafa` |
| 36 | + - `--font-family`: font family for form elements, default `helvetica, sans-serif` |
| 37 | + - `--color-active`: color of active element, default `#27b9cc` |
| 38 | + - `--color-inactive`: color of inactive element, default `#8a8a8a` |
| 39 | + - `--color-invalid`: color of invalid element, default `#c72227` |
| 40 | + |
| 41 | +## JSON Schema |
| 42 | + |
| 43 | +A few notes on how json schema interpeted by form generator. |
| 44 | + |
| 45 | +### Types |
| 46 | + |
| 47 | +For the sake of simpliticy form generator uses a "type" keyword of JSON Schema in order to identify type of the field. When "type" keyword is an array or types or missing then value edited as json string. Boolean renders toggle, but can be customized to render a checkbox. |
| 48 | + |
| 49 | +### Title |
| 50 | + |
| 51 | +Title rendered as label for terminal input fields (leaf nodes of the value), and as h3 headers for objects. |
| 52 | + |
| 53 | +### Required |
| 54 | + |
| 55 | +Keyword `required` of object type used to identify whether to display * near the label. Optional text fields also have button to erase value displayed. |
| 56 | + |
5 | 57 |
|
6 |
| -- build and package |
7 |
| -- publish |
8 | 58 |
|
9 | 59 | Main json-form repository is here: https://github.com/1602/json-form please report all bugs there. Issues are disabled in this project.
|
0 commit comments