如何在 Kendo UI 菜单上的多个组之间插入分隔条

Posted 2023-05-07

【中文标题】如何在 Kendo UI 菜单上的多个组之间插入分隔条

【英文标题】：How do insert a separator bar between many groups on a Kendo UI Menu

【发布时间】：2013-06-12 10:37:06

【问题描述】：

我正在为剑道菜单使用纯 Razor 样式定义：

@using Kendo.Mvc.UI
@(html.Kendo().Menu()
    .Name("main-menu")
    .Items(items1 =>
        
            items1.Add().Text("Home").Url(@Url.Action("Index", "Home"));
            items1.Add().Text("Movements").Items(subs =>
                
                    subs.Add().Text("Import Data").Action("Import", "VehicleMovementBatch");
                    subs.Add().Text("View Movements");
                );
            items1.Add().Text("Presences");
            items1.Add().Text("Billing");            
            items1.Add().Text("Config").Items(items2 =>
                    
                        items2.Add().Text("Pricing").Action("Index", "PriceRule");
                        items2.Add().Text("Users");
                    );                           
            items1.Add().Text("Control");
        )
)

我在所有互联网上的任何地方都找不到绝对血腥的东西，甚至暗示了如何正确地做到这一点。我最接近的是用javascript对象表示法定义DataSource，带有分隔符，并在运行时将其分配给客户端的网格oj。这绝对是一个很好的例子，只能向所有的大神祈祷，API 没有像文档那样极度不足。

【问题讨论】：

（对于那些好奇的人awesome the API is。）

那里的文档非常丰富。

【参考方案1】：

这就是你需要做的。我自己想出来的，因为我在网络上的任何地方都找不到答案。

items1.Add().Text("<hr/>").Encoded(false).Enabled(false);

【讨论】：

我发现使用  效果更好——当我使用<hr/> 时，边框仍然有一个小间隙。不过，Encoded 属性非常方便，谢谢！

【参考方案2】：

在剑道 2014.1.528 中对我不起作用

这样做：

children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false);

所以一个例子是：

items.Add().Text("Menu X").ImageUrl(Url.Content("~/Content/img/menux_16E.png"))
    .Items(children =>
     
         children.Add().Text("Item 1").ImageUrl(Url.Content("~/Content/img/item1_16E.png"));
         children.Add().Text("<div class='k-separator'></div>").Encoded(false).Enabled(false);
         children.Add().Text("Item 3").ImageUrl(Url.Content("~/Content/img/item3_16E.png"));
     );

【讨论】：

另外我设置了背景颜色，因为分隔符不可见：“”我用过到垂直方向菜单中的大多数上部项目（项目 - 不是子项）。

好的 - 是的，我的网站非常接近基本的 Bootstrap 颜色，这在我的主题中不是问题。

【参考方案3】：

为了帮助以后遇到此问题的任何人，您可以使用以下内容直接添加分隔符：

items.Add().Separator(true);

这至少从 v2013.2.918 开始有效，因为这就是我正在使用的。

贾斯汀

【讨论】：

至少今天，这对我没有影响。 2019.3.1023

【参考方案4】：

我有 v2016.3.914，items.Add().Separator(true); 在 RTL 页面上创建了不需要的水平滚动条。

我用这个解决了：

inner.Add().Separator(true).HtmlAttributes(new  style = "width: 99%;" );