Question

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

这是视图的代码：

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

Answer 1

解决方案是向消息条中添加任何空白css类class="sapUiLargeMarginTop"，以使“通用平铺”适合IconTabFilter内。 the result

完整代码：

<mvc:View controllerName="sap.m.sample.GenericTileAsLaunchTile.Page" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml">
<IconTabBar id="idTopLevelIconTabBar" class="sapUiResponsiveContentPadding">
    <items>
        <IconTabFilter id="start" icon="sap-icon://hint">
            <content>
                <GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout" header="Sales Fulfillment Application Title"
                    subheader="Subtitle" press="press">
                    <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"
                    press="press">
                    <TileContent></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" press="press">
                    <TileContent unit="EUR" footer="Current Quarter"/>
                </GenericTile>
                <GenericTile class="sapUiMediumMarginBeginEnd sapUiLargeMarginTop tileLayout" header="Jessica D. Prince Senior Consultant"
                    subheader="Department" press="press">
                    <TileContent></TileContent>
                </GenericTile>

            <MessageStrip class="sapUiLargeMarginTop" type="Information" showIcon="true" text="Another IconTabFilter"/>
                </content>
        </IconTabFilter>
        <IconTabFilter id="layouts" icon="sap-icon://bookmark">
            <MessageStrip type="Information" showIcon="true" text="Another IconTabFilter"/>
        </IconTabFilter>
    </items>
</IconTabBar>

Answer 2

我认为您不能将GenericTile放在IconTabFilter中。

以下是使用“图标”标签栏的Fiori设计准则：https://experience.sap.com/fiori-design-web/icontabbar/#layout

IconTabBar与GenericTile的奇怪行为

2 个答案: