zoukankan      html  css  js  c++  java
  • SAP Fiori图标(icon)设计原理

    When you are creating a new button and assign an icon to it, there is no way for you to know exactly what does this “add” icon look like.

    Even if you use the star symbol in launchpad designer, there is still no convenient way to find this add icon.

    Since all icons are listed in F4 help, there is no filter there:

    Instead we can use this useful tool to find the icon you need efficiently:
    Currently there are 535 icons available.

    We can easily find the icon we need by search button.

    And in the right-bottom part of the page, there is an id “e000” displayed for icon “accidental-leave”. We will explain the meaning of this id in the end part of this blog.

    How is icon rendered in Fiori

    Originally I thought that the binary content of all icons are stored in the server side. And in the runtime when an icon is to be rendered, there is a conversion done, transferring the internal url like “sap-icon://XXX” to absolute path like “https://XXXX” which points to the icon stored in the server. However I am wrong.

             Figure: how the traditional image is displayed in Fiori
    

    If you use the element inspection function in Chrome development tool, you will find the corresponding html element for image in the final html source code does not contain any attribute like src. Instead, it has an attribute defined by SAP which seems to have something to do with image content: data-sap-ui-icon-content.

    The value of this attribute is filled by IconRenderer when the icon is to be displayed in UI. The variable oIconInfo.content stores the actual value.

    Check the source code of this js file, where all the supported icons together with their icon name and icon code are hard coded.



    So the icon id for icon “accidental-leave” we find in icon browser page, e000, is just its corresponding code hard coded in IconPool.js.

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    2021年Mysql个税计算公式,自定义函数
    安装篇-安装mysql8
    安装篇-安装Nginx
    jsconfig.json配置Webpack别名,识别@
    Avue动态校验表单的必填校验
    renren开源把时间类型Date换为LocalDate报错
    Avue的CRUD最强封装(三)
    Avue-curd通用模板(二)
    Kalman Filter算法详解
    STM32 ADC DMA 中断模式多通道读取ADC转换值
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13631183.html
Copyright © 2011-2022 走看看