时间戳

首页 > 解决方案 > IconTabBar 与 GenericTile 的奇怪行为

sapui5 - IconTabBar 与 GenericTile 的奇怪行为

问题描述

为什么图片上的 XML 树看起来像第二张图片？MessageStrip试图进入IconTabBar甚至跳过 4 个元素的内容区域，并且不择手段地退出。文档中对于可以放在IconTabBar或 中的内容没有任何限制IconTabFilter。GenericTile不是应该占据屏幕上整个位置的布局。如何将瓷砖放入内容中IconTabBar？

XML 视图树

结果截图

这是视图的代码：

<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc">
  <IconTabBar id="idTopLevelIconTabBar" class="sapUiResponsiveContentPadding">
    <items>
      <IconTabFilter id="start" icon="sap-icon://hint">
        <GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
          header="Sales Fulfillment Application Title"
          subheader="Subtitle"
        >
          <TileContent unit="EUR" footer="Current Quarter">
            <ImageContent src="sap-icon://home-share"/>
          </TileContent>
        </GenericTile>
        <GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
          header="Manage Activity Master Data Type"
          subheader="Subtitle"
        >
          <TileContent />
        </GenericTile>
        <GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
          header="Manage Activity Master Data Type With a Long Title Without an Icon"
          subheader="Subtitle Launch Tile" mode="HeaderMode"
        >
          <TileContent unit="EUR" footer="Current Quarter" />
        </GenericTile>
        <GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout"
          header="Jessica D. Prince Senior Consultant"
          subheader="Department"
        >
          <TileContent/>
        </GenericTile>
        <MessageStrip
          type="Information"
          showIcon="true"
          text="Another IconTabFilter"
        />
      </IconTabFilter>
      <IconTabFilter id="layouts" icon="sap-icon://bookmark">
        <!-- ... -->
      </IconTabFilter>
    </items>
  </IconTabBar>
</mvc:View>

标签： sapui5sap-fiori

解决方案

解决方案是删除我的自定义 CSS（例如tileLayout）并将任何边距类（例如"sapUiLargeMarginTop"）添加到消息条，以便通用 Tile 适合 IconTabFilter 内。

结果

推荐阅读