sap.m.Select ListItems 使用彩色图标

Question

我想使用 sap.m.Select 控件，它显示带有图标的 sap.ui.core.ListItem 控件列表。这是开箱即用的，所有 select 项目及其图标都以默认的蓝色呈现。

但是，基于绑定模型中的属性，我希望图标具有某种颜色。要有条件地设置控件样式，我会使用 customData 聚合，并根据映射的键值，呈现相应的样式。对于其他用例（列表、表格等），这很有用。

我认为问题出在 sap.ui.core.ListItem 控件上。如果我使用以下简化示例：

<Select selectedKey="{/mykey}">
    <core:ListItem key="1" text="One" icon="sap-icon://circle-task-2">
        <core:customData>
            <core:CustomData
                key="iconcolor"
                value="grey"
                writeToDom="true"/>
        </core:customData>
    </core:ListItem>
</Select>

...那么我希望将 data-iconcolor 属性写入列表项（因为设置了 writeToDom="true" 属性）。但是，没有呈现任何内容，因此我无法创建 CSS select 或基于该数据属性。

有人知道如何使用彩色图标呈现 Select 控件吗？任何帮助将不胜感激！

编辑：

根据下面@MrNajzs 提供的解决方案，结果证明我的原型不起作用，因为我没有使用数据绑定...很高兴知道:-)

我还必须在下拉列表中呈现当前 selected 项目，但这基本上是相同的方法

对于那些感兴趣的人，这里是完整的运行示例：

sap.ui.controller("view1.initial", {
    onInit : function() {
        const oModel = new sap.ui.model.json.JSONModel({
            listitems: [
                {
                    "status": "none",
                    "desc": "None"
                },
                {
                    "status": "inprogress",
                    "desc": "In progress"
                },
                {
                    "status": "done",
                    "desc": "Done"
                }
            ],
            selectedKey: "none"
        });

        this.getView().setModel(oModel);
    }
});

sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

[data-iconcolor="none"] span.sapMSelectListItemIcon {
    color: grey;
}

[data-iconcolor="inprogress"] span.sapMSelectListItemIcon {
    color: blue;
}

[data-iconcolor="done"] span.sapMSelectListItemIcon {
    color: green;
}

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.m"
      xmlns:u="sap.ui.unified"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc">
        <Select
            forceSelection="true"
            selectedKey="{/selectedKey}"
            items="{/listitems}">
            <core:ListItem key="{status}" text="{desc}" icon="sap-icon://circle-task-2">
                <core:customData>
                    <core:CustomData
                      key="iconcolor"
                      value="{status}"
                      writeToDom="true"/>
                </core:customData>
            </core:ListItem>
            <customData>
                <core:CustomData
                  key="iconcolor"
                  value="{/selectedKey}"
                  writeToDom="true"/>
            </customData>
        </Select>
    </mvc:View>
</script>

Answer 1

嘿，这是我的作品。

型号-Controller.js

var oItems = new JSONModel({
                items: [{
                    "key": "01",
                    "text": "01",
                    "color": "yellow",
                    "icon": "sap-icon://save"
                }, {
                    "key": "02",
                    "text": "02",
                    "color": "green",
                    "icon": "sap-icon://cancel"
                }]
            });
            this.setModel(oItems, "select");

Select-View.xml

    <Select forceSelection="false" width="300px" items="{ path: 'select>/items'}">
            <core:ListItem key="{select>key}" text="{select>text}" icon="{select>icon}">
                <core:customData>
                    <core:CustomData key="iconcolor" value="{select>color}" writeToDom="true"/>
                </core:customData>
            </core:ListItem>
        </Select>

style.css

[data-iconcolor="green"] {
    color: green;
}

[data-iconcolor="yellow"] {
    color: yellow;
}

结果：

sap.m.Select ListItems 使用彩色图标

sap.m.Select with ListItems using colored icons

sapui5