时间戳

首页 > 解决方案 > Kendo-UI jQuery 菜单项拆分器

jquery - Kendo-UI jQuery 菜单项拆分器

问题描述

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

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

我目前正在做的是添加一个文本为空的项目，并且有样式让它看起来该项目只是一条水平线。例子：

$('#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: '#/'
          }
        ]
      }
    ]
  })
});

小提琴：https ://dojo.telerik.com/eFiHUMEx

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

标签： jquerykendo-ui

解决方案

实际上，您的解决方法不是破解。这基本上就是你添加分隔符的方式，一些 CSS 魔法。由于您正在寻找定义的剑道分隔符。改变：

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

对此：

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

这应该够了吧。

推荐阅读