UI5 StandardListItem DetailAndActive 改变Icon

Question

我想更改

的标准 "pen" 图标

StandardListItem of type DetailAndActive

。有办法吗？

我的 XML 到目前为止：

            <List
                id="master1List"
                items="{/path}"
                mode="{device>/listMode}"
                select="onSelect"
                itemPress="showDetail"
                growing="true"
                growingScrollToLoad="true">
                <items>
                    <StandardListItem 
                        type="DetailAndActive" 
                        activeIcon="sap-icon://message-information"
                        id="master1ListItem"
                        press="onSelect" 
                        title="{title}">
                    </StandardListItem>
                </items> 
</List>

据我所知只有属性 "icon"（我不需要）和 "activeIcon"（我设置但也没有显示在 itemPress/tab 上）。我想我可以通过 css 更改它，但它是在数据属性（图标字体，而不是我可以覆盖的 uri）中设置的，然后应用：

    .sapUiIcon:before {
  content: attr(data-sap-ui-icon-content);
...

谢谢..

[编辑：] 我接受以下答案是正确的，因为它有效。但是正如您在我的评论中看到的那样，我想通过使用 here 中描述的聚合元数据来接受控件：

    metadata: {
    aggregations: {
        "Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
    },
    defaultAggregation: "Button"
},

到目前为止，我可以在我的 XML 视图中向 ListItem 添加一个 Button 控件，但它没有呈现 :-) 我还想念这里的任何想法吗？

Answer 1

图标在控件中进行了硬编码。我发现我可以扩展 StandardListItem 以获得您想要的结果。

sap.m.StandardListItem.extend('my.StandardListItem', {
    renderer: {},
    constructor: function(sId, mProperties) {
        sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
    var sURI = sap.ui.core.IconPool.getIconURI("action");
    this._detailIcon =
        new sap.ui.core.Icon({
            src:sURI})
        .setParent(this, null, true)
        .addStyleClass("sapMLIBIconDet");            
    }
});

http://jsbin.com/tuqufe/1/edit?js,output

中有一个工作示例

坏消息是在下一个版本 (1.28.?) 中，完成此操作的方式将发生重大变化，因此您将需要重做扩展控件。

[编辑:]抱歉我忘记了这个。我刚刚使用 OpenUI5 V1.30 beta 库构建了一个快速示例。现在关键代码看起来像这样...

sap.m.StandardListItem.extend('my.StandardListItem', {
    metadata: {
        properties: {
            "detailIcon": "string"
        }
    },
    renderer: {},
    setDetailIcon: function(icon) {
        this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
    }
});

http://jsbin.com/bayeje/1/edit?js,output

处有样本

UI5 StandardListItem DetailAndActive 改变Icon

UI5 StandardListItem DetailAndActive change Icon

icons

listitem

icon-fonts

sapui5