A button providing several icons for use in a variety of situations.
NOTE: this component is not fully implemented yet - only info and share are available atm.
The following attributes are available and can be modified at runtime:
-
icon - one of: [close, lineChart, barChart, dotPlot, star, share, info, download]. no default, is mandatory.
- TODO
- background - on which kind of background the button is used. one of: [light, dark]. default is light.
-
state - tristate, one of [true,false,disabled]. default is true.
- within a button-group, only buttons w/ state false/off can be focussed
- NOTE: this is TODO
- size - the width and height. default is 40.
Note that the temporary state when mouse is being clicked but not yet released, is not considered.
Events:
- action - keyborad-Enter and mouse-click are captured, prevented and instead one event "action" is dispatched.
There are 96 possibilities (8 * 2 * 3 * 2), 24 for each icon to consider. In order to reduce this complexity, the implementation of this component makes a assumptions (due to lack of specification) - while at the same time staying open to overruling assumptions for any specific combination.
"dependencies": {
"@ewc-lib/ewc-icon-button": "latest"
},
<body>
<script src="bundle.js"></script>
<div style="display:flex; gap:3px; margin-bottom: 5px;">
<ewc-icon-button icon="info" id="infobutton"></ewc-icon-button>
<ewc-icon-button icon="share"></ewc-icon-button>
</div>
<div style="display:flex; gap:3px; padding:2px; align-items: center; background-color: var(--c-p-140);">
<ewc-icon-button background="dark" icon="info"></ewc-icon-button>
<ewc-icon-button background="dark" icon="share"></ewc-icon-button>
</div>
<script>
window.addEventListener('DOMContentLoaded',function () {
document.getElementById("infobutton").addEventListener("action",(e)=>{
alert("Info button on light background clicked or selected w/ kdb.")
}
</script>
</body>
import "@ewc-lib/ewc-icon-button"