时间戳

首页 > 解决方案 > 自定义样式剑道垂直菜单角度？

angular - 自定义样式剑道垂直菜单角度？

问题描述

我在当前的 Angular 项目中使用Kendo UI 组件。

在Vertical Menu我无法更改其他级别（儿童）的样式。

我怎样才能改变菜单的父母和孩子的风格？

有人有什么想法吗？

剑道垂直菜单的示例链接：

https://www.telerik.com/kendo-angular-ui/components/menus/menu/vertical/

代码示例：

   <kendo-menu [items]="items" [vertical]="true" style="display:inline-block; width: 100%;" >
        </kendo-menu>

标签： angularkendo-ui

解决方案

您可以为其创建kendo-menu-item和应用样式。

<kendo-menu (select)="onSelect($event, template)">
     <kendo-menu-item text="Hover me" cssClass="mycustom">
         <kendo-menu-item text="Toggle popup" >
         </kendo-menu-item>
     </kendo-menu-item>
</kendo-menu>

<ng-template #template>
    <p style="margin: 15px;">Hey, it is popup content!</p>
</ng-template>

和风格：

.mycustom:hover{
  background-color: orange;
}
.mycustom{
  background-color: green;
}
.k-animation-container .k-popup{
  background-color: lightyellow;      
}

请参阅 stackblitz 示例。

推荐阅读