Question

我的移动应用程序菜单显示各种操作。这些操作可以分组，我想用分隔符分隔这些组。不幸的是，没有这样的分隔线。你会如何解决这个问题？通过CSS？或者通过创建自定义列表项？这看起来怎么样？

赞赏任何好的想法。

Answer 1

由于它是一个移动应用程序，我假设您正在使用sap.m库中的List控件。

您可以使用List控件的分组工具在您的项目中包含自定义组“子标题”。它们看起来像分隔线。您不需要创建任何自定义CSS。

要查看其外观以及如何操作，请查看UI5 Explored应用中的List - Grouping sample。

有关列表中自定义排序和分组的详细信息，您可能会发现我的这篇文章也很有用：“Custom Sorting and Grouping”。

Answer 2

好的，根据qmarco的建议，我创建了一个从sap.m.StandardListItem派生的自定义控件，并为SAPUI5分配了与组头列表项相同的样式类 - etvoilà：

sap.m.StandardListItem.extend("controls.CustomListDivider", {

init: function() {
    sap.m.StandardListItem.prototype.init.call(this);
    this.setType(sap.m.ListType.Inactive);
},

renderer: function(oRm, oControl) {
    oRm.addClass("myListDivider");

    // add style classes from Group Header List Item
    oRm.addClass("sapMGHLI");
    oRm.addClass("sapMGHLIUpperCase");
    oRm.addClass("sapMLIB");
    oRm.addClass("sapMLIB-CTX");
    oRm.addClass("sapMLIBShowSeparator");
    oRm.addClass("sapMLIBTypeInactive");

    sap.m.StandardListItemRenderer.render(oRm, oControl);
}

现在您可以手动将其添加到列表中，而无需使用模型或分拣机等。

SAPUI5 sap.m.List：分隔符

2 个答案: