Step 18: Icons

介绍

Our dialog is still pretty much empty. Since SAPUI5 is shipped with a large icon font that contains more than 500 icons, we will add an icon to greet our users when the dialog is opened.

1.练习效果

2.源码

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>

<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" >

<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>

We add an icon to the button that opens the dialog. The sap-icon://
protocol is indicating that an icon from the icon font should be loaded. The
identifier world is the readable name of the icon in the icon font.

3.Tip

You can look up other icons using the Icon Explorer tool in the Demo Kit.

To call any icon, use its name as listed in the Icon Explorer in sap-icon://<iconname>.

4.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>

<core:FragmentDefinition

xmlns="sap.m"

xmlns:core="sap.ui.core" >

<Dialog

id="helloDialog"

title ="Hello {/recipient/name}">

<core:Icon

src="sap-icon://hello-world"

size="8rem"

class="sapUiMediumMargin"/>

</content>

<Button

text="{i18n>dialogCloseButtonText}"

press=".onCloseDialog"/>

</beginButton>

</Dialog>

</core:FragmentDefinition>

In the dialog fragment, we add an icon control to the content aggregation of the
dialog. Luckily, the icon font also comes with a “Hello World” icon that is perfect
for us here. We also define the size of the icon and set a medium margin on it.

5.Conventions

Always use icon fonts rather than images wherever possible, as they are
scalable without quality loss (vector graphics) and do not need to be loaded
separately.

1.练习效果

2.源码

3.Tip

4.webapp/view/HelloDialog.fragment.xml

5.Conventions

您可能还会对这些文章感兴趣！

留下一个回复取消回复

Step 18: Icons

1.练习效果

2.源码

3.Tip

4.webapp/view/HelloDialog.fragment.xml

5.Conventions

您可能还会对这些文章感兴趣！

留下一个回复 取消回复

留下一个回复取消回复