Kendo-UI jQuery 菜单项拆分器

Question

我目前正在使用 Kendo-UI 2021.2.616，特别是 Bootstrap SASS 主题。

是否有特定的 class 或对象定义可用于在菜单项下拉列表中创建拆分器？

我目前正在做的是添加一个项目，其中文本为空，并且有样式使其看起来像是一条水平线。示例：

$('#menu').kendoMenu({
  dataSource: new kendo.data.HierarchicalDataSource({
    data: [
      {
        text: 'Dropdown',
        items: [
          {
            text: 'Item 1',
            url: '#/'
          },
          {
            text: 'Item 2',
            url: '#/'
          },
          {
            attr: {
              style: 'border-top: 1px solid #000; height: 1px; margin: 0 0.25rem;'
            },
            text: ''
          },
          {
            text: 'Item 3',
            url: '#/'
          }
        ]
      }
    ]
  })
});

Fiddle: https://dojo.telerik.com/eFiHUMEx

我的问题是我的变通办法闻起来像黑客。我觉得 Kendo-UI 库会定义一个菜单项拆分器，但通过文档我找不到一个。

Answer 1

实际上，您的变通方法并不是 hack。这基本上就是添加分隔符的方式，一些 CSS 魔法。由于您正在寻找定义的 Kendo 分隔符。变化：

attr: {
  style: 'border-top: 1px solid #000; height: 1px; margin: 0 0.25rem;'
},

对此：

attr: {
  class: 'k-separator'
},

这应该可以解决问题。

Kendo-UI jQuery 菜单项拆分器

Kendo-UI jQuery Menu Item Splitter

jquery

kendo-ui