如何覆盖 listItem 图标工具提示?
How to override listItem icon tooltip?
我正在尝试更改核心图标的工具提示:ListItem。
listItem 的工具提示 属性 正在更改整个项目的工具提示,这不是我要找的。
<core:ListItem icon="sap-icon://message-error" tooltip="someTooltip" />
工具提示只会出现在下拉列表中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Test</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Select>
<core:ListItem icon="sap-icon://accept" tooltip="someTooltip" />
</Select>
</mvc:View>
</script>
<script>
sap.ui.define([
'sap/ui/core/mvc/Controller',
], function(Controller) {
"use strict";
var oController = Controller.extend("myView.Template", {
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
您需要扩展 core: ListItem
或者您可以使用 sap.m.CustomListItem
并指定图标工具提示来解决您的问题。
View.xml
<List items="{/items}">
<CustomListItem>
<HBox>
<core:Icon size="2rem" width="50px" tooltip="{tooltipInfo}" src="{icon}" />
<VBox>
<Link text="{title}"/>
<Label text="{type}"/>
</VBox>
</HBox>
</CustomListItem>
</List>
Controller.js
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"items": [
{ "tooltipInfo": "Group1", "icon": "sap-icon://hint", "type": "Monitor", "title": "Tiles: a modern UI design pattern for overview & navigation."},
{ "tooltipInfo": "Group2", "icon": "sap-icon://inbox", "number": "89", "title": "Approve Leave Requests", "info": "Overdue", "infoState": "Error" },
{ "tooltipInfo": "Group3", "icon": "sap-icon://email", "type": "Create", "title": "Create Leave Requests", "info": "28 Days Left", "infoState": "Success" },
{ "tooltipInfo": "Group4", "icon": "sap-icon://travel-expense-report", "number": "281", "numberUnit": "euro", "title": "Travel Reimbursement", "info": "1 day ago" },
{ "tooltipInfo": "Group5", "icon": "sap-icon://loan", "number": "2380", "numberUnit": "euro", "title": "My Salary", "info": "8 days ago" },
{ "tooltipInfo": "Group6", "icon": "sap-icon://lab", "number": "1", "numberUnit": "Invention", "title": "Test Lab Reports","info": "8 Days Ago" }]
});
this.getView().setModel(oModel);
输出
我正在尝试更改核心图标的工具提示:ListItem。
listItem 的工具提示 属性 正在更改整个项目的工具提示,这不是我要找的。
<core:ListItem icon="sap-icon://message-error" tooltip="someTooltip" />
工具提示只会出现在下拉列表中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Test</title>
<script id="sap-ui-bootstrap" type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex">
</script>
<script id="oView" type="sapui5/xmlview">
<mvc:View height="100%" controllerName="myView.Template"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Select>
<core:ListItem icon="sap-icon://accept" tooltip="someTooltip" />
</Select>
</mvc:View>
</script>
<script>
sap.ui.define([
'sap/ui/core/mvc/Controller',
], function(Controller) {
"use strict";
var oController = Controller.extend("myView.Template", {
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
您需要扩展 core: ListItem
或者您可以使用 sap.m.CustomListItem
并指定图标工具提示来解决您的问题。
View.xml
<List items="{/items}">
<CustomListItem>
<HBox>
<core:Icon size="2rem" width="50px" tooltip="{tooltipInfo}" src="{icon}" />
<VBox>
<Link text="{title}"/>
<Label text="{type}"/>
</VBox>
</HBox>
</CustomListItem>
</List>
Controller.js
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
"items": [
{ "tooltipInfo": "Group1", "icon": "sap-icon://hint", "type": "Monitor", "title": "Tiles: a modern UI design pattern for overview & navigation."},
{ "tooltipInfo": "Group2", "icon": "sap-icon://inbox", "number": "89", "title": "Approve Leave Requests", "info": "Overdue", "infoState": "Error" },
{ "tooltipInfo": "Group3", "icon": "sap-icon://email", "type": "Create", "title": "Create Leave Requests", "info": "28 Days Left", "infoState": "Success" },
{ "tooltipInfo": "Group4", "icon": "sap-icon://travel-expense-report", "number": "281", "numberUnit": "euro", "title": "Travel Reimbursement", "info": "1 day ago" },
{ "tooltipInfo": "Group5", "icon": "sap-icon://loan", "number": "2380", "numberUnit": "euro", "title": "My Salary", "info": "8 days ago" },
{ "tooltipInfo": "Group6", "icon": "sap-icon://lab", "number": "1", "numberUnit": "Invention", "title": "Test Lab Reports","info": "8 Days Ago" }]
});
this.getView().setModel(oModel);
输出