IT干货网

UI5-文档-4.18-Icons

lxf 2022年03月09日 SAP 144 0

我们的对话框仍然是空的。因为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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.17-Fragment Callbacks