UI5 StandardListItem DetailAndActive更改图标(UI5 Stand

2019-10-22 14:33发布

我想改变的标准的“笔”图标

类型DetailAndActive的StandardListItem

。 有没有办法这样做呢?

我的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> 

据我所知,只有属性“图标”(我不需要)和“activeIcon”(这是我设置,但它也没有itemPress /标签上显示)。 我想我可能会通过CSS改变它,但它是在一个数据属性(图标字体,而不是一个URI我可以覆盖)设置,然后应用:

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

谢谢..

[编辑:]我接受了下面的答案正确的,因为它的工作原理。 但你可以在我的评论阅读,我想使人们有可能通过使用像描述的聚合元接受控件在这里 :

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

这工作到目前为止这是我现在允许一个Button控件在我的XML视图添加到列表项,但它不是:-)任何想法呈现什么我还怀念在这里?

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测试库快速样品。 现在关键代码如下...

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 change Icon