Question

Kendo 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的链接在此处发布David的解决方案，因此该解决方案得以保留。我需要在环境中设置.no按钮的样式，以将其折叠为一行。完美。

.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" }
        ]

Answer 1

没有OOTB方式可以做到这一点。您可以使用几种技巧来使用自己的标记。例如，您可以执行以下操作：

$("#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。

如何在剑道工具栏的splitButton菜单项中添加分隔符

1 个答案: