Question

当我在一个对象列表中使用分组时，群组标题的样式在很大程度上比一些重要的信息更适合。

如何重新设定群组标题的样式，以更好地反映其在信息层级中的重要性？

例如，在下面的代码段＆＃39;编码101＆＃39;和＆＃39;战斗101＆＃39;都不像他们那样突出。

我一直在网上研究，但没有找到关于这个主题的任何具体内容，而且UI5的设计师一般表现出来的夸张让我觉得这可以照顾而不回复编写CSS。

＆＃13;

// JSON sample data
var data = {
"peeps":  [
    {className: "Coding 101", firstName: "Alan", lastName: "Turing"},
    {className: "Coding 101", firstName: "Ada", lastName: "Lovelace"},
    {className: "Combat 101", firstName: "D", lastName: "Trump"},
    {className: "Combat 101", firstName: "Spartacus", lastName: ""},
    {className: "Combat 101", firstName: "Tasmanian", lastName: "Devil"}

  ]  
};



sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", {
     onInit: function() {

    // create JSON model instance
    var oModel = new sap.ui.model.json.JSONModel();

    // set the data for the model
    oModel.setData(data);
       
    var oList = this.getView().byId("SubsList")

    // bind the model to the list
    oList.setModel(oModel);
  
     }
     
   });
   sap.ui.xmlview({
     viewContent: jQuery("#myView").html()
   }).placeAt("content");


});

＆＃13;

<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<script id="myView" type="ui5/xmlview">
  <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
  xmlns:layout="sap.ui.commons.layout" xmlns:f="sap.ui.layout.form">

    <layout:MatrixLayout>
    	<layout:rows>
      	<layout:MatrixLayoutRow>
        	<layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None">

                        <List
                                title="Los Optionales"
                                id="SubsList"
                                width="auto"
                                items="{
                                path: '/peeps',
                                sorter: {
                                    path: 'className',
                                    group: true
                                }}"
                                class="sapUiResponsiveMargin"
                            >
                            <items>
                                <StandardListItem
                                        title="{firstName} {lastName}"
                                        type="Active"
                                />
                            </items>
                            <layoutData>
                                <FlexItemData growFactor="1" />
                            </layoutData>
                        </List>


        	</layout:MatrixLayoutCell>
        </layout:MatrixLayoutRow>
      </layout:rows>
    </layout:MatrixLayout>
    
                    

  </mvc:View>
</script>

<body class="sapUiBody">
  <div id="content"></div>
</body>

＆＃13;

Answer 1

您可以使用组头的工厂函数并添加UI5附带的样式类。我必须承认，找到适合的CSS类可能是一个挑战。请查看示例here。

在您的视图中，您只需将groupHeaderFactory属性添加到项目聚合设置：

<List
    items="{
        path : '/peeps',
        sorter : {
           path: 'className',
           group: true
        },
        groupHeaderFactory : '.createGroupHeader'
    }">

在控制器中添加相应的方法：

createGroupHeader : function(group) {
    return new GroupHeaderListItem({ 
        "title" : group.key                      
    }).addStyleClass("sapMH1Style");
}

Here您找到了聚合绑定的所有参数，包括groupHeaderFactory。一般说明工厂功能的使用here。 Explored应用也包含example。

更改ObjectList的组标题样式并启用分组

1 个答案: