UI5-文档-4.18-Icons

我们的对话框仍然是空的。因为SAPUI5附带了一个包含500多个图标的大图标字体，所以我们将在对话框打开时添加一个图标来问候用户。

Preview

 

An icon is now displayed in the dialog box

Coding

You can view and download all files at Walkthrough - Step 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://协议表示应该加载图标字体中的图标。标识符世界是图标字体中图标的可读名称。

提示：您可以使用演示工具包中的图标资源管理器工具查找其他图标。

若要调用任何图标，请使用sap-icon中的图标资源管理器中列出的图标名称://<iconname>。

sap-icon://<iconname>.

 

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>

 在对话框片段中，我们将图标控件添加到对话框的内容聚合中。幸运的是，图标字体还附带了一个“Hello World”图标，非常适合我们使用。我们还定义了图标的大小，并在其上设置了一个中等大小的空白。

 

Conventions

　　尽可能使用图标字体，而不是图像，因为它们是可伸缩的，没有质量损失(矢量图形)，不需要单独加载。

 

Parent topic: Walkthrough

Previous: Step 17: Fragment Callbacks

Next: Step 19: Reuse Dialogs

Related Information

Icon Explorer

API Reference:sap.ui.core.Icon

Samples:sap.ui.core.Icon