granite-json-tree-viewer:
[ This description is mirrored from README.md at github.com/LostInBrittany/granite-json-tree-viewer on 2019-05-22 ]
granite-json-tree-viewer
Based on Polymer 2.x
A JSON tree viewer custom element based on GitHub - summerstyle/jsonTreeViewer: json formatter/viewer/pretty-printer (with jsonTree javascript-library)
Usage example
<granite-json-tree-viewer
data='{"firstName":"Jonh","lastName":"Smith","phones":["123-45-67","987-65-43"]}'></granite-json-tree-viewer>
Styling
<granite-json-tree-viewer provides the following custom properties and mixins
for styling:
| Custom property | Description | Default |
|---|---|---|
--jsontree-bg |
Mixin applied to the background of the tree | {} |
--jsontree-tree |
Mixin applied to the tree | {} |
--jsontree-child |
Mixin applied to the child elements | {} |
--jsontree-label |
Mixin applied to the JSON labels | {} |
--jsontree-value |
Mixin applied to the JSON values | {} |
--jsontree-value-string |
Mixin applied to the JSON string values | {} |
--jsontree-value-number |
Mixin applied to the JSON number values | {} |
--jsontree-value-boolean |
Mixin applied to the JSON boolean values | {} |
--jsontree-value-null |
Mixin applied to the JSON null values | {} |
--jsontree-expand-button |
Mixin applied to the expand button | {} |
Install the Polymer-CLI
First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.
Viewing Your Element
$ polymer serve
Running Tests
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test to run your application’s test suite locally.