answered
2022-05-26 10:15:18 +0800
wastemails 130 ● 1 ● 2 using zk 10.0.0.FL.20220413-Eval
My index.zul page contains
<custom-navbar menus="@load(vm.menus)" selectedColor="#fcfcde"/>
My web/custom-component.zul file is as follows
<zk xmlns:x="xhtml">
<style>
.z-menupopup{padding:0px;background:#fff;}
.z-menupopup-separator{display:none;}
.z-menu-text, .z-menuitem-text{text-shadow:none;}
.z-menu-content, .z-menuitem-content{border:none;padding:5px;border-radius:0px;}
.special-menupopup .z-menuitem-content:hover{background:${selectedColor};color:#fff;padding:5px;}
<!-- .z-menu-content:hover, .z-menuitem-content:hover{background:${selectedColor};color:#fff;}-->
.menubar{display:flex;}
.menubar div {flex-direction: column; justify-content: center; color:#fff;padding:14px 10px;font-size:13px;cursor:pointer;white-space:pre;}
.menubar div.selected{background:${selectedColor};}
</style>
<div sclass="menubar" hflex="1">
<forEach items="${menus}" var="menu">
<choose>
<when test="${empty menu.subMenu}">
<x:div textContent="${menu.label}" sclass="@load((menu.selected ? 'selected':''))" onClick="@command('showPage',parentId=menu.id,selectedId=menu.id,path=menu.path)" />
</when>
<otherwise>
<div sclass="@load((menu.selected ? 'selected':''))" popup="${(menu.label+=',after_start,delay=0')}">
<x:span textContent="${menu.label}"/>
<image src="images/drop-down-arrow.svg"/>
</div>
<menupopup id="${menu.label}" style="min-width:200px;border-top:none;" action="show: slideDown; hide: slideUp" sclass="special-menupopup" >
<forEach items="${menu.subMenu}" var="submenu">
<menuitem onClick="@command('showPage',parentId=menu.id,selectedId=submenu.id,path=submenu.path)" label="${submenu.label}" />
<menuseparator if="${submenu.separator}"/>
</forEach>
</menupopup>
</otherwise>
</choose>
</forEach>
</div>
</zk>
My custom component configured in /metainfo/zk/lang-addon.xml as follows
<language-addon>
<addon-name>admin-addon</addon-name>
<version>1.0</version>
<language-name>xul/html</language-name>
<depends>zuti</depends>
<component>
<component-name>custom-navbar</component-name>
<template-uri>~./custom-navbar.zul</template-uri>
</component>
</language-addon>
Getting the following error in chrome browser console
Uncaught Unknown widget: zephyrex.Custom-navbarInfo zephyrex.wpd:9677