Contact us Create app

Directory

← Back

xtal-treant

Web component wrapper around treant library

Author

Rating

Links

Popularity

<100

Published on webcomponents.org

<xtal-treant>

xtal-treant is a dependency free web component wrapper around the great Treant library.

The web component requires a property, "config" to be set:

<xtal-treant config="[[treeBeard]]"></xtal-treant>

Because the library is designed to create different tree charts, based on a passed on css file, this raises a bit of a cunnundrum for a reusable web component. You can pass in the css file in the config setting. This will dynamically pass the css content into the shadow DOM. This currently has some issues in Chrome.

So the better alternative is to define a preload link in document.head:

<link class="treant css" relx="preload" as="fetch" href="../examples/basic-example/basic-example.css" data-postfix="basic">

Note the use of "treant" and "css" in the class, and the data-postfix value.

This will cause xtal-treant to dynamically create a new web component with name xtal-treant-basic, with the contents of the css file stamped into the template.

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

WIP

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • treant-js#^1.0.1
  • xtal-latx#0.0.44
Released
2018-10-11
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

xtal-treant - Vaadin Add-on Directory

Web component wrapper around treant library xtal-treant - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/xtal-treant) # \ xtal-treant is a dependency free web component wrapper around the great [Treant](http://fperucic.github.io/treant-js/) library. The web component requires a property, "config" to be set: ```html ``` Because the library is designed to create different tree charts, based on a passed on css file, this raises a bit of a cunnundrum for a reusable web component. You can pass in the css file in the config setting. This will dynamically pass the css content into the shadow DOM. [This currently has some issues in Chrome](https://github.com/Polymer/polymer/issues/4865). So the better alternative is to define a preload link in document.head: ```html ``` Note the use of "treant" and "css" in the class, and the data-postfix value. This will cause xtal-treant to dynamically create a new web component with name xtal-treant-basic, with the contents of the css file stamped into the template. ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests WIP
View on GitHub
View on NPM

xtal-treant version 0.0.15
### Dependencies * @bower_components/accessibility-developer-tools#GoogleChrome/accessibility-developer-tools#^2.10.0 * @bower_components/async#caolan/async#^1.5.0 * @bower_components/chai#chaijs/chai#^3.2.0 * @bower_components/font-roboto#PolymerElements/font-roboto#^1 * @bower_components/iron-demo-helpers#PolymerElements/iron-demo-helpers#^2.0.0 * @bower_components/iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2 * @bower_components/iron-location#PolymerElements/iron-location#1 - 2 * @bower_components/iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.0.0 * @bower_components/lodash#lodash/lodash#^3.7.0 * @bower_components/marked#chjj/marked#~0.3.9 * @bower_components/marked-element#PolymerElements/marked-element#1 - 2 * @bower_components/mocha#mochajs/mocha#^3.1.2 * @bower_components/polymer#Polymer/polymer#^2.0.0 * @bower_components/prism#LeaVerou/prism#* * @bower_components/prism-element#PolymerElements/prism-element#1 - 2 * @bower_components/resize-observer-polyfill#que-etc/resize-observer-polyfill#^1.5.0 * @bower_components/shadycss#webcomponents/shadycss#^v1.1.0 * @bower_components/sinon-chai#domenic/sinon-chai#^2.7.0 * @bower_components/sinonjs#blittle/sinon.js#^1.14.1 * @bower_components/stacky#PolymerLabs/stacky#^1.3.0 * @bower_components/test-fixture#PolymerElements/test-fixture#^3.0.0 * @bower_components/vaadin-split-layout#vaadin/vaadin-split-layout#^3.0.1 * @bower_components/vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.1.0 * @bower_components/web-component-tester#Polymer/web-component-tester#^6.0.0 * @bower_components/webcomponentsjs#webcomponents/webcomponentsjs#^1.0.0

xtal-treant version 0.0.1
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.16
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.17
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.18
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.19
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.2
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.20
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.22
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

xtal-treant version 0.0.3
### Dependencies * treant-js#^1.0.1 * xtal-latx#0.0.44

Online