如何为Kendo DropDownButton的菜单项添加水平分隔线

嘿，这事儿其实挺简单的！Kendo UI的DropDownButton和SplitButton的实现逻辑一致，不需要手动插入<hr>标签，只要通过配置项就能快速添加菜单项分隔符，还能保证和组件样式统一。

具体修改步骤 #

你只需要在actionsOptions数组里，第二个和第三个菜单项之间插入一个配置为{ separator: true }的对象即可。

修改后的TS代码如下：

this.actionsOptions = [
  { 
    text: this.lbl_Copy, 
    icon: 'copy', 
    click: () => { this.copyAPHit(); } 
  },
  { 
    text: this.lbl_ShowRelations, 
    icon: 'connector', 
    click: () => { this.showRelations(); } 
  },
  // 新增的分隔符配置
  { separator: true },
  { 
    disabled: (this.segmentsPath !== "APs"), 
    text: this.lbl_UnSync, 
    icon: 'non-recurrence', 
    click: () => { this.unSync(); } 
  }
];

原理说明 #

当Kendo DropDownButton解析到带有separator: true的配置项时，会自动渲染一条符合组件风格的水平分隔线（底层会生成<li class="k-separator"><hr></li>这类结构），完全满足你要在两个菜单项间加分隔线的需求，还不用操心样式兼容问题。

要是你用的Kendo UI版本比较旧，可以确认下版本兼容性——不过近几年的Angular版Kendo（2020年之后的版本）都支持这个特性哦。

内容的提问来源于stack exchange，提问作者Giannis