用货币符号显示成本水平的控制。

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中加入了一个纯文本字符，所以 "图像 "是可以放大的，而不影响质量，而且颜色也可以根据主题而定，如上图所示。不过当然，你也可以直接用两张栅格图代替。

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

用货币符号显示成本水平的控制。

问题描述投票：0回答：1

1个回答

最新问题

用货币符号显示成本水平的控制。

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1