SAPUI5 sap.m.List: Divider

Question

У меня есть меню для моего мобильного приложения, которое отображает различные действия. Эти действия можно сгруппировать, и я хотел бы разделить эти группы на разделитель. К сожалению, такого делителя нет. Как бы вы решили эту проблему? По css? Или путем создания настраиваемого элемента списка? Как это будет выглядеть?

Любые хорошие идеи оценили.

Answer 1

Как мобильное приложение, я предполагаю, что вы используете элемент управления List из библиотеки sap.m.

Вы можете использовать объекты группировки List, чтобы иметь подзаголовок пользовательских групп среди ваших элементов. Они выглядят как разделители. Вам не нужно создавать какие-либо пользовательские CSS.

Чтобы посмотреть, как это будет выглядеть и как это сделать, посмотрите на List - Grouping sample в приложении UI5 Explored.

Для получения дополнительной информации о пользовательской сортировке и группировке в списке, вы также можете найти этот пост полезной: «Custom Sorting and Grouping».

Answer 2

OK, согласно предложению qmarco, я создал пользовательский элемент управления, производный от sap.m.StandardListItem и присвоены те же классы стилей, как SAPUI5 делает для заголовка группы элементов списка - и вуаля:

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); 
} 

Теперь вы можете вручную добавить его в свой список без необходимости использования модели или сортировщика и т. Д.