sap.m.IconTabBar: How to Make Header Sticky / Only Content Scrollable

问题

I'm looking for a way to make a sap.m.IconTabBar sticky, meaning that the tab bar stays fixed while you can scroll the contents. As far as I can see, there is no standard attribute support for this. Anyone implemented this?

PS: Should be possible by using CSS attribute position: fixed to the header part of the component.

回答1:

here my comment again as answer:

In the example i wrapped the content of the sap.m.IconTabBar in a sap.m.ScrollContainer and set the vertical property to true.

http://jsbin.com/luqurosaye/1/edit?html,output

回答2:

Here are two approaches to enable sticky header or make only the content scrollable. By these, the content can be also set 100% in height relative to its parent size.

ScrollContainer within IconTabFilter

<IconTabBar
  stretchContentHeight="true"
  applyContentPadding="false"
>
  <items>
    <IconTabFilter>
      <!-- Scrollable container, such as: -->
      <ScrollContainer
        horizontal="false"
        vertical="true"
        height="100%"
      >
        <!-- Your scrollable content -->
      </ScrollContainer>
    </IconTabFilter>
  </items>
  <content>
    <!-- Or a single ScrollContainer here for all icon tabs -->
  </content>
</IconTabBar>

• Enable stretchContentHeight in IconTabBar so that it covers the whole available area
• Wrap the content with a scrollable container control such as ScrollContainer or Page.

---

ScrollContainer outside of IconTabHeader

Alternatively, something less known but still useful could be the control IconTabHeader which is used in IconTabBar^src as well. In contrast to the approach with IconTabBar,

• IconTabHeader needs its parent container to have its own scrolling disabled.
  • For Page, enableScrollable="false".
  • For Dialog, verticalScrolling="false".
• The content is unassociated with the IconTabHeader.
• Some features from IconTabBar (such as expandable) are missing.

That being said, here is an example with IconTabHeader:

<Page enableScrolling="false">
  <IconTabHeader>
    <items><!-- ...  --></items>
  </IconTabHeader>
  <ScrollContainer
    horizontal="false"
    vertical="true"
    height="100%"
  >
    <!-- Your scrollable content -->
  </ScrollContainer>
</Page>

来源：https://stackoverflow.com/questions/35555097/sap-m-icontabbar-how-to-make-header-sticky-only-content-scrollable