如何将分隔符添加到剑道工具栏拆分按钮菜单项答案

【问题标题】：How to add separator to kendo toolbar splitbutton menuitems如何将分隔符添加到剑道工具栏拆分按钮菜单项
【发布时间】：2018-08-07 14:51:27
【问题描述】：

剑道 UI 2015.2.805

我想在工具栏的拆分按钮下拉菜单项之间添加分隔线。我知道如何在工具栏按钮之间添加分隔线，如下所示，但它不适用于 menuButtons 数组。

$("#my_toolbar").kendoToolBar({
items: [
    { type: "button", text: "Option 1" },
    { type: "separator"},
    { type: "button", text: "Option 2" },
    { type: "splitButton", text: "Actions", 
        menuButtons: [
            { id: "button_3", text: "Option 3" },
            { id: "button_4", text: "Option 4" },
            //separator here
            { id: "button_5", text: "Option 5" },
            { id: "button_6", text: "Option 6" }
        ]
    }
  ]
});

` 如何在评论中添加分隔符？

已解决：

通过他的链接在此处发布 David 的解决方案，以便保留。我需要在我的环境中设置 .no-button 的样式以将其折叠成一行。完美。

.no-button { padding: 0;}

menuButtons: [
            { id: "button_3", text: "Option 3" },
            { id: "button_4", text: "Option 4" },
            { enable: false, attributes: { class: "no-button"} },
            { id: "button_5", text: "Option 5" },
            { id: "button_6", text: "Option 6" }
        ]

【问题讨论】：

这是你要找的东西吗：dojo.telerik.com/UlAfUZEg
是的，非常接近。我需要在 .no-button 类中添加一个 padding: 0 ，现在它是完美的。

标签： css kendo-ui toolbar

【解决方案1】：

没有 OOTB 方法可以做到这一点。有一些 hacky 方法可以用你自己的标记来做到这一点。例如，您可以执行以下操作：

$("#my_toolbar").kendoToolBar({
items: [
    { type: "button", text: "Option 1" },
    { type: "separator"},
    { type: "button", text: "Option 2" },
    { type: "splitButton", text: "Actions", 
        menuButtons: [
            { id: "button_3", text: "Option 3" },
            { id: "button_4", text: "Option 4" },
            { text: "<hr style='margin:0px; padding:0px; color:#d8d8d8;' />", enable: false },
            { id: "button_5", text: "Option 5" },
            { id: "button_6", text: "Option 6" }
        ]
    }
  ]
});

唯一的问题是，如果你滚动它，它会被突出显示，因为当它被渲染时它会被包裹在一个锚元素中。如果这让您感到困扰，那么您可以给 hr 一个 id，然后使用 JavaScript 找到它，获取它的父节点，并修改锚点的 css。

【讨论】：