I am currently using Aurelia 1 to construct my application. Right now, I am in the process of creating a custom toolbar element known as custom-toolbar.ts. Within this toolbar, there will be an unspecified number of child elements referred to as custom-toolbar-button.ts.
This is how I envision using it:
/*some view html*/
<template>
/*view stuff*/
<custom-toolbar>
<custom-toolabr-button title="button1" icon="btn1_ico" click.bind="buton1Clicked()"> </custom-toolbal-button>
<custom-toolabr-button title="button2" icon="btn2_ico" click.bind="buton2Clicked()"> </custom-toolbal-button>
...
</custom-toolbar>
</template>
For this custom-toolbar to be responsive and adjust its buttons accordingly (such as hiding, shrinking, displaying a "hamburger" button when the viewport is small), it must have knowledge of the number of buttons present and their widths. This information is crucial for calculating the total width and implementing specific arrangement logic within the custom-toolbar.
Is there a way for the parent custom-toolbar element to identify its children (for enumeration purposes) and extract the width of each component? Alternatively, how can the child component (button) communicate its width and presence to the parent?
Your assistance would be greatly appreciated.