如何将分隔符添加到Kendo工具栏的splitbutton菜单项 [英] How to add separator to kendo toolbar splitbutton menuitems

问题描述

Kendo UI 2015.2.805

Kendo UI 2015.2.805

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

I want to add a separator line between menu items on the toolbars's split button dropdown. I know how to add a separator line between toolbar buttons, as shown below, but it does not work for the menuButtons array.

$("#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" }
        ]
    }
  ]
});

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

` How to add separator at the comment?

已解决:

通过David的链接在此处发布David的解决方案，因此该解决方案得以保留.我需要在环境中设置.no按钮的样式，以将其折叠为一行.完美.

Posting David's solution here from his link so it's persisted. I needed to style the .no-button in my environment to collapse it to a line. Perfect.

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

推荐答案

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

There is no OOTB way to do this. There are a few hacky ways to do it with your own markup. For example you can do something like this:

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

The only problem with this is that it will get highlighted if you scroll over it, because it will get wrapped in an anchor element when it gets rendered. If that bothers you, then you could give the hr an id and then use JavaScript to find it, get its parent, and modify the css of the anchor.

这篇关于如何将分隔符添加到Kendo工具栏的splitbutton菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！