SAPUI5基础知识22 - 图标(Icons)

1. 背景

SAPUI5 提供了一套丰富的图标库，可以用于增强应用程序的视觉吸引力和用户体验。这些图标是矢量图形，可以在任何分辨率下保持清晰，并且可以自定义颜色和大小。

2. 示例

在 SAPUI5 中，图标可以通过 sap.ui.core.Icon 控件使用，也可以直接在其他控件中使用，如按钮或列表项。

通过Icon控件直接使用:

new sap.ui.core.Icon({src: "sap-icon://add",size: "2rem",color: "#0f0"
});

在这个例子中，我们创建了一个新的 Icon 控件，其源设置为 "sap-icon://add"，这是添加图标的 URI。我们还设置了图标的大小和颜色。

在其他控件中使用:

new sap.m.Button({icon: "sap-icon://add",text: "Add"
});

在这个例子中，我们在一个按钮控件中使用了添加图标。按钮的文本设置为 "Add"。

SAPUI5 的图标通过特殊的 URI 引用，格式为 “sap-icon://”。例如，添加图标的 URI 是 “sap-icon://add”。

此外，可以通过 color 和 size 属性自定义图标的颜色和大小。颜色可以是任何有效的 CSS 颜色值，大小可以是任何有效的 CSS 尺寸值。

例如，你可以将图标的颜色设置为绿色，并将其大小设置为 2rem：

new sap.ui.core.Icon({src: "sap-icon://add",size: "2rem",color: "#0f0"
});

请注意，不是所有的图标都支持自定义颜色。只有那些设计为可以改变颜色的图标才能改变颜色。

可以在 SAP 图标 Explorer 中查看所有可用的图标。
在这里插入图片描述
例如，搜索Add关键字，便可以看到所有相关的图标：

3. 练习

让我们在前序练习的基础上，为我们的<Button>控件和<Dialog>对话框控件添加图标，进一步改善我们程序的UI。

3.1 为Button控件添加图标

打开HelloPanel.view.xml文件，通过icon属性，为<Button>控件添加图标。
在这里插入图片描述

sap-icon:// 协议指示应加载图标，标识符world是图标的名称。

改动后HelloPanel.view.xml文件内容如下：

<mvc:ViewcontrollerName="zsapui5.test.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"
><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><content><Buttonid="helloDialogButton"icon="sap-icon://world"text="{i18n>openDialogButtonText}"press=".onOpenDialog"class="sapUiSmallMarginEnd"/><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighligh-asColor myCustomText"/></content></Panel>
</mvc:View>

3.2 为Dialog控件添加图标

接下来，让我们为<Dialog>控件添加图标。

打开HelloDialog.fragment.xml文件，在<Dialog>控件的<content>聚合中添加图标，并定义图标的大小，以及设置中等边距。
在这里插入图片描述

改动后的HelloDialog.fragment.xml文件内容如下：

<core:FragmentDefinitionxmlns="sap.m"xmlns:core="sap.ui.core"
><Dialogid="helloDialog"title="Hello {/recipient/name}"><content><core:Iconsrc="sap-icon://hello-world"size="8rem"class="sapUiMediumMargin"/></content><beginButton><Buttontext="{i18n>dialogCloseButtonText}"press=".onCloseDialog"/></beginButton></Dialog>
</core:FragmentDefinition>