如何在 SAPUI5 中打破 IconTabBar 中选项卡的标题

Question

我想打破 IconTab 组件中 Tab 的标题。

我尝试使用 CSS。默认情况下，它的宽度为自动。在我的标题显示为省略号后，我将其更改为大约 5rem [例如，我是标题....，实际标题是 I am title Here]。

我的代码如下所示：

                <items>

                    <!--  Tab -->

                    <IconTabFilter text="I am Title Here">
                        <content>
                        </content>
                    </IconTabFilter>
              </items>
</IconTabBar>

我的系统中出现了这样的情况。

实际设计如下：

我的Css是这样的：

在此首先应用宽度auto。然后我将该样式重写为 5rem。你可以在我的截图中看到。

Answer 1

不确定你的意思...标题的默认宽度实际上设置为 5rem 而不是 auto。

如果你设置 width:auto; 你不会换行，但你的标签标题至少是可见的。

换行是可能的，但你需要做更多的改变CSS（IconTabBar 高度等）

编辑：我的印象是你也会显示一个图标。如果不是这种情况，只需设置属性 showAll="true" 而无需更改 CSS :)

查看这个工作示例：

sap.ui.controller("view1.initial", {
    onInit: function(oEvent) {}
});

var oView = sap.ui.xmlview({
    viewContent: jQuery("#view1").html()
});

oView.placeAt("uiArea");

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <title>SAPUI5 example</title>

    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-libs="sap.m"></script>

    <script id="view1" type="ui5/xmlview">
        <mvc:View
          height="100%"
          controllerName="view1.initial"
          xmlns:mvc="sap.ui.core.mvc"
          xmlns:core="sap.ui.core"
          xmlns="sap.m">
            <IconTabBar
              id="idIconTabBar"
              select="handleIconTabBarSelect">
                <items>
                <IconTabFilter
                  showAll="true"
                  text="Some pretty long text"
                  keys="All" />
                <IconTabSeparator />
                <IconTabFilter
                  showAll="true"
                  iconColor="Positive"
                  text="Hi I'm a title"
                  key="Ok" />
                <IconTabFilter
                  iconColor="Critical"
                  text="Heavy"
                  key="Heavy" />
                <IconTabFilter
                  iconColor="Negative"
                  text="Overweight"
                  key="Overweight" />
                </items>
            </IconTabBar>
        </mvc:View>
    </script>

</head>

<body class="sapUiBody" role="application">
    <div id="uiArea"></div>
</body>
</html>

Answer 2

您可以在您自己的 CSS 文件中覆盖 SAPUI5 主题的布局设置，方法是将 !important 标签添加到您的 CSS。这是一个 'quick and dirty' 解决方案，效果很好，但在大量管理时会变得困难。

假设您想将宽度更改为 50%，您可以将以下内容添加到 CSS 文件中：

.sapMITBTextOnly .sapMITBText{
width: 50% !important;
}

如何在 SAPUI5 中打破 IconTabBar 中选项卡的标题

How to break the title of tab in IconTabBar in SAPUI5

sapui5