A simple web component displaying an isometric water box.

Installation

You can use NPM to install this component.

npm i --save waterbox-component

Usage

To use this web component in your project you can utilize one of the following styles of syntax.

/* In an existing module / web component */ import 'waterbox-component'; /* At top of an application */ <script type="module" src="node_modules/waterbox-component/dist/bundle.js"></script> /* Alternatives for top of application */ <script type="module"> import 'waterbox-component'; </script>

You can now use the component in your HTML:

<water-box value="50"></water-box>

This component is responsive. Simply set its width and height via CSS.

water-box { width: 100px; height: 180px; }

Properties

Property Attribute Type Description Example value value Number Percentual level of water. 50 strokeColor stroke-color String Stroke color. rgba(64,64,64,0.8) fillColor fill-color String Water fill color. rgba(192,192,225,0.8) boxColor box-color String Box fill color. rgba(127,127,127,0.8) strokeWidth stroke-width Number Stroke width. 2 separators separators Number Number of scale separators. 5 drawTop draw-top Boolean Whether to draw the box ceiling. true contrast contrast Number Color contrast. 15

License

MIT