グループ化を有効にしてObjectListのグループタイトルのスタイルを変更

オブジェクトリストでグループ化を使用すると、グループヘッダーのスタイルは、重要な情報には不思議ではないようです。グループ化を有効にしてObjectListのグループタイトルのスタイルを変更

情報階層の重要性をよりよく反映するために、グループタイトルのスタイルを変更するにはどうすればよいですか？

たとえば、以下のスニペットでは、 'コーディング101'と 'コンバット101'の両方が目立っているわけではありません。

私はオンラインで研究していますが、このトピックとUI5のデザイナーが一般的に表示しているようなものは、CSSを書くことに戻らずに食べていると思います。

// 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"); 
 

 

 
});

<!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> 
 
    \t <layout:rows> 
 
     \t <layout:MatrixLayoutRow> 
 
     \t <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> 
 

 

 
     \t </layout:MatrixLayoutCell> 
 
     </layout:MatrixLayoutRow> 
 
     </layout:rows> 
 
    </layout:MatrixLayout> 
 
    
 
        
 

 
    </mvc:View> 
 
</script> 
 

 
<body class="sapUiBody"> 
 
    <div id="content"></div> 
 
</body>

出典

2017-01-25 Vanquished Wombat

あなたはグループヘッダーの工場出荷時の機能を利用すると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も含まれています。

出典

2017-01-25 12:32:37 matbtt

ありがとうございましたMatbtt - 完全に動作します。私は尋ねることができます - あなたはこの技術を説明している文書のどこにいますか？ –

あなたは大歓迎です。私はいくつかの参考文献を追加した。 – matbtt

優れています。私はファクトリ関数を認識していましたが、APIビューアのManagedObjectModuleページにはアクセスしなかったので、 'oBindingInfo.groupHeaderFactory'属性は認識しませんでした。私はこのAPIページを勉強すると思います。 –

グループ化を有効にしてObjectListのグループタイトルのスタイルを変更

答えて

関連する問題