javascript - SAPUI5 图标大小和颜色的变化

Question

我很想知道是否有办法，找出如何更改 SAPUI5 图标大小，以便它可以满足某些条件和颜色。

如您所见，第二个和第三个 Button 确实具有相同的大小，同时第一个更小。

我如何影响第一个的大小？

Answer 1

您可以通过为特定按钮提供自定义 class - increaseFont 并覆盖 font-size 和 color 来实现它 属性。

View.xml

<FlexBox
    alignItems="Center"
    justifyContent="Start">
    <items>
        <Button enabled="true" icon="sap-icon://process" class="sapUiSmallMarginEnd increaseFont"/>             
        <Button enabled="true" icon="sap-icon://open-command-field" class="sapUiSmallMarginEnd"/>
        <Button enabled="true" icon="sap-icon://navigation-right-arrow" />              
    </items>
</FlexBox>

CSS

.sapMBtn.increaseFont .sapMBtnIcon {
    font-size: 1.5rem;
    color: red;
}

输出

注意:所有图标的大小都相同。因为有多个右箭头，所以它看起来更小。