karolisk
karolisk
SSolidJS
Created by karolisk on 10/17/2024 in #support
Issues when using SolidJS with child web components
@Dakotys wow, that's a great explanation, I learned a lot! And I like you solution. I thought adding static strings is not possible in typescript types.
7 replies
SSolidJS
Created by karolisk on 10/17/2024 in #support
Issues when using SolidJS with child web components
7 replies
SSolidJS
Created by karolisk on 10/17/2024 in #support
Issues when using SolidJS with child web components
Here is main code with issues:
<modus-toolbar>
{/* if I remove modus-toolbar, everything works */}
<For each={props.menuItems}>
{(section, idx) => (
<>
<For each={section}>
{(item) => (
<>
{/* doesn't work? */}
<modus-tooltip text={item.name} position="right">
<modus-button icon-only={item.name}></modus-button>
</modus-tooltip>
{/* works, but intellisense is broken */}
<modus-tooltip attr:text={item.name} position="right">
<modus-button attr:icon-only={item.name}></modus-button>
</modus-tooltip>
{/* prop: doesn't compile at all??
<modus-tooltip prop:text={item.name} position="right">
<modus-button prop:icon-only={item.name}></modus-button>
</modus-tooltip>
*/}
{/* works... */}
<modus-tooltip text="arrow_next" position="right">
<modus-button icon-only="arrow_next"></modus-button>
</modus-tooltip>
{/* doesn't work? */}
<modus-tooltip
text={props.menuItems[0][0].name}
position="right"
>
<modus-button
icon-only={props.menuItems[0][0].name}
></modus-button>
</modus-tooltip>
</>
)}
</For>
<Show when={idx() !== props.menuItems.length - 1}>
<modus-divider></modus-divider>
</Show>
</>
)}
</For>
</modus-toolbar>
<modus-toolbar>
{/* if I remove modus-toolbar, everything works */}
<For each={props.menuItems}>
{(section, idx) => (
<>
<For each={section}>
{(item) => (
<>
{/* doesn't work? */}
<modus-tooltip text={item.name} position="right">
<modus-button icon-only={item.name}></modus-button>
</modus-tooltip>
{/* works, but intellisense is broken */}
<modus-tooltip attr:text={item.name} position="right">
<modus-button attr:icon-only={item.name}></modus-button>
</modus-tooltip>
{/* prop: doesn't compile at all??
<modus-tooltip prop:text={item.name} position="right">
<modus-button prop:icon-only={item.name}></modus-button>
</modus-tooltip>
*/}
{/* works... */}
<modus-tooltip text="arrow_next" position="right">
<modus-button icon-only="arrow_next"></modus-button>
</modus-tooltip>
{/* doesn't work? */}
<modus-tooltip
text={props.menuItems[0][0].name}
position="right"
>
<modus-button
icon-only={props.menuItems[0][0].name}
></modus-button>
</modus-tooltip>
</>
)}
</For>
<Show when={idx() !== props.menuItems.length - 1}>
<modus-divider></modus-divider>
</Show>
</>
)}
</For>
</modus-toolbar>
7 replies