更改标签中的星号位置

问题描述

我正在浏览该网站https://experience.sap.com/fiori-design-web/label/并看到以下内容：

所以我就像“甜，让我们尝试一下！”并将required="true"添加到我的标签中：

<Label required="true" text="E-Mail"/>

这就是我得到的：

如何将星号移到左侧？

我正在使用v1.81.0

解决方法

星号曾经在左侧，但是新的Fiori设计准则要求它在右侧，自1.73版本开始在UI5中实现。这是相关的提交：https://github.com/SAP/openui5/commit/11544b855407af6f1025e8a855dc46701648779d。

sap.m.Label的新设计需要星号在标签的右侧。

指南页面中的picture已已过时。

由于最新版本的UI5针对最新的Fiori设计准则，因此我不鼓励使用任何自定义CSS，因为这通常会导致UI不一致和维护成本增加。

在我们最近的一个项目中，我们面临着类似的困境。我们别无选择，只能覆盖标准的CSS。我们不建议您覆盖标准CSS，但可以确保将其作为最后的选择。

由于我们希望为项目中的所有标签启用此属性，因此我们确实覆盖了标准CSS。您还可以提供自定义类和替代。下面是css，用于从右侧删除“ *”并将其放置在文本的左侧。

.sapMLabelRequired:before {
    content: "*";
    color: #c14646;
    font-family: "72","72full",Arial,Helvetica,sans-serif;
    font-size: 1rem;
    font-weight: bold;
    position: relative;
    vertical-align: middle;
    line-height: 0;
}

.sapMLabel.sapMLabelRequired .sapMLabelColonAndRequired:after {
    content: "" !important;
}

sapui5 sapui5