第18步:图标-CSDN博客

本文档介绍如何在SAPUI5应用中为对话框添加图标，利用内置的图标字体库增强用户体验。通过在按钮和对话框内容中插入图标，实现了视觉上的引导和美化。同时，强调了使用字体图标而非图片的优势，如可伸缩性、矢量图形和加载速度。教程覆盖了从选择图标到实现动态绑定的步骤，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

说明

我们的对话框仍然是空的。由于SAPUI5带有一个包含500多个图标的大图标字体，我们将在对话框打开时添加一个图标来欢迎用户。

预览

在这里插入图片描述

现在在对话框中显示了一个图标

代码

你可以在演练-第18步查看和下载所有文件。

webapp/view/HelloPanel.view.xml

在这里插入图片描述

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
         <Button
            id="helloDialogButton"
            icon="sap-icon://world"
            text="{i18n>openDialogButtonText}"
            press=".onOpenDialog"
            class="sapUiSmallMarginEnd"/>
         <Button
            text="{i18n>showHelloButtonText}"
            press=".onShowHello"
            class="myCustomButton"/>
         <Input
            value="{/recipient/name}"
            valueLiveUpdate="true"
            width="60%"/>
           <FormattedText
              htmlText="Hello {/recipient/name}"
              class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

我们给打开对话框的按钮添加一个图标。sap-icon://协议表示应从图标字体中加载图标。标识符world是图标字体中图标的可读名称。

提示
您可以使用Demo工具包中的图标资源管理器工具查找其他图标。
要调用任何图标，请使用sap-icon://中的图标资源管理器中列出的名称。
Icon Explorer

webapp/view/HelloDialog.fragment.xml
在这里插入图片描述

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