Question

我试图在IconTab组件中打破Tab的标题。

我尝试使用CSS。默认情况下，它的宽度为auto。之后我将这个更改为5rem，我的标题显示为elipses [例如，我是标题....，实际标题是我在这里标题]。

我的代码如下所示：

                <items>

                    <!--  Tab -->

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

我在我的系统中得到这样的结果。

I am getting like this.

实际设计如下所示：

enter image description here

我的Css是这样的：

enter image description here

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

Answer 1

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

如果设置width:auto;，您将无法获得换行符，但至少可以看到标题标题。

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

编辑：我认为你也会展示一个图标。如果不是这种情况，只需设置属性showAll="true"，而无需更改CSS：）

请参阅此工作示例：

＆＃13;

sap.ui.controller("view1.initial", {
    onInit: function(oEvent) {}
});

var oView = sap.ui.xmlview({
    viewContent: jQuery("#view1").html()
});

oView.placeAt("uiArea");

＆＃13;

<!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>

＆＃13;

Answer 2

您可以在自己的CSS文件中覆盖SAPUI5主题的布局设置，方法是在CSS中添加！important标签。这是一个“快速而肮脏”的解决方案，效果很好，但很难大量管理。

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

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

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

2 个答案: