Странное поведение IconTabBar с GenericTile - PullRequest
Новая
       23

Странное поведение IconTabBar с GenericTile

1 голос
/ 18 июня 2019

Почему дерево XML на картинке выглядит так, как показано на второй картинке? MessageStrip пытается попасть в область содержимого IconTabBar, даже перепрыгивая через 4 элемента, и плитки выходят любым способом. В документации нет никаких ограничений на то, что можно поместить в IconTabBar или в IconTabFilter. GenericTile - это не макет, который должен занимать все место на экране. Как положить плитки в контент IconTabBar?

XML-View Tree

Result screenshot

Вот код вида: 

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

Ответы [ 2 ]

0 голосов
/ 30 июня 2019

Решение состоит в том, чтобы добавить любой класс css margin class="sapUiLargeMarginTop" к полосе сообщений, чтобы общая плитка помещалась внутри IconTabFilter. результат

полный код: 

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

0 голосов
/ 19 июня 2019

Я не думаю, что вы можете поместить GenericTile в IconTabFilter.

Вот рекомендации по дизайну Fiori для использования панели вкладок значков: https://experience.sap.com/fiori-design-web/icontabbar/#layout

...