A simple web component displaying an isometric water box.
You can use NPM to install this component.
npm i --save waterbox-component
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;
}
| 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 |
MIT