使用货币符号显示成本水平的控件

Question

这可能是一个自以为是的问题，但我想问这个问题是因为 UI5 的功能非常广泛。我需要将这些元素设为

我打算向其中引入自定义字体。您认为这是一个好的解决方案，还是有更好的方法可以使用一些开箱即用的解决方案？

Answer 1

您要查找的是sap.m.RatingIndicator。

<RatingIndicator
  editable="false"
  maxValue="6"
  value="4"
  iconSelected="imageOrIconURI1"
  iconUnselected="imageOrIconURI2"
/>

在您的情况下，您需要两张图片：一张用于现金/货币符号，另一张为灰色。两个 URI 都应相应地分配给 iconSelected 和 iconUnselected。

这是我的尝试：

sap.ui.require([
  "sap/ui/core/Core"
], Core => Core.attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/theming/Parameters",
], async (Fragment, JSONModel, ThemeParameters) => {
  "use strict";

  const control = await Fragment.load({
    definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form" xmlns="sap.m">
      <Label text="Cost A" />
      <RatingIndicator
        displayOnly="true"
        editable="false"
        maxValue="6"
        value="4"
        iconSelected="{myCurrency>/filled}"
        iconUnselected="{myCurrency>/unfilled}"
      />
      <Label text="Cost B" />
      <RatingIndicator
        displayOnly="true"
        editable="false"
        maxValue="6"
        value="2"
        iconSelected="{myCurrency>/filled}"
        iconUnselected="{myCurrency>/unfilled}"
      />
    </form:SimpleForm>`,
  });

  //==================================================================
  //============= Sample rating indicator icons ======================

  const currencyCode = "€";
  // determine theme-dependent color values for font colors:
  const colorFilled = ThemeParameters.get("sapUiContentForegroundTextColor").replace("#", "%23");
  const colorUnfilled = ThemeParameters.get("sapUiContentImagePlaceholderBackground").replace("#", "%23");
  const model = new JSONModel({ // assign the icon URIs, e.g. data-URI with SVG content:
    filled: `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 14 14'>
      <text x='50%' y='66%'
        fill='${colorFilled}'
        dominant-baseline='middle'
        text-anchor='middle'>
        ${currencyCode}
      </text>
    </svg>`,
    unfilled: `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>
      <text x='50%' y='66%'
        fill='${colorUnfilled}'
        dominant-baseline='middle'
        text-anchor='middle'>
        ${currencyCode}
      </text>
    </svg>`,
  });
  
  control.setModel(model, "myCurrency").placeAt("content");
})));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

由于我将纯文本字符放入 SVG，"image" 可以缩放而不会降低质量，并且颜色也可以根据主题设置，如上所示。当然，你也可以只用两张光栅图代替。

无论如何，我相信 RatingIndicator 是一个很好的候选者，可以用来代替创建和维护自定义控件或自定义字体。

使用货币符号显示成本水平的控件

Control for displaying level of cost with currency signs

sapui5