waterbox-component

Waterbox Component

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