Skip to content

Commit 40cd8de

Browse files
committed
Describe some API in readme
1 parent bbbc9ad commit 40cd8de

File tree

1 file changed

+53
-3
lines changed

1 file changed

+53
-3
lines changed

README.md

+53-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,59 @@
11
# json-form-custom-element
22
https://www.webcomponents.org/element/json-form-custom-element
33

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

6-
- build and package
7-
- publish
858

959
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

Comments
 (0)