使用货币符号显示成本水平的控件 [英] Control for displaying level of cost with currency signs
问题描述
这可能是一个自以为是的问题，但我想提出这个问题，因为 UI5 的功能非常广泛.我需要将这些元素设为
我打算向其引入自定义字体.您认为这是一个很好的解决方案，还是有一些开箱即用的解决方案可以更好地做到这一点?
您正在寻找的是 sap.m.RatingIndicator.
-
由于我将纯文本字符放入 SVG，因此图像"可以缩放而不会降低质量，并且颜色也可以与主题相关，如上所示.当然，您也可以只使用两个光栅图像.
无论如何，我相信
RatingIndicator是一个很好的候选者，可以用来代替创建和维护自定义控件或自定义字体.This might be an opinionated question, but I'd like to ask it because capabilities of UI5 are quite broad. I need to have these elements as
To which I am planning to introduce a custom font. Do you think it's a good solution or is there any better way to do that with some out of the box solutions?
解决方案What you're looking for is
sap.m.RatingIndicator.<RatingIndicator editable="false" maxValue="6" value="4" iconSelected="imageOrIconURI1" iconUnselected="imageOrIconURI2" />In your case, you'll need two images: one for the cash / currency symbol, and one greyed-out version of it. Both URIs should be assigned to
iconSelectedandiconUnselectedaccordingly.Here is my attempt:
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>Since I put a plain text character to the SVG, the "image" is zoomable without losing quality and the color can be also made theme-dependent as shown above. But of course, you can also just use two raster images instead.
Either way, I believe the
RatingIndicatoris a good candidate which could be used instead of creating and maintaining a custom control or custom font.这篇关于使用货币符号显示成本水平的控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
