ion-slide-box-tabs icon indicating copy to clipboard operation
ion-slide-box-tabs copied to clipboard

How do you make the tabs static (non-scrollable)?

Open kehnee opened this issue 9 years ago • 2 comments

Is there a way to have the tabs stick to the top of the screen (like a sticky header) and not have it scroll with the content? Something similar to this when you scroll up/down Any help will be highly appreciated. Thanks.

kehnee avatar Jul 25 '15 02:07 kehnee

a few tweaks with ion-content should do it

  <ion-content has-bouncing="false" scroll="false">
         <ion-slide-box show-pager="false" ion-slide-tabs slide-tabs-scrollable on-slide-changed="slideHasChanged($index)">
          <ion-slide ion-slide-tab-label="All">
            <ion-content scroll="true">
             <ion-refresher on-refresh="doRefresh()" pulling-icon="ion-load-d" spinner="ios-small"></ion-refresher>
              <ng-include src="'templates/partials/notifications-all.html'"></ng-include>
            </ion-content>
          </ion-slide>
          <ion-slide ion-slide-tab-label="Liked">
              <ion-content scroll="true">
                <ion-refresher on-refresh="doRefresh()" pulling-icon="ion-load-d" spinner="ios-small"></ion-refresher>
                <ng-include src="'templates/partials/notifications-liked.html'"></ng-include>
              </ion-content>
          </ion-slide>
        </ion-slide-box>
 </ion-content>
 .slider {
    height: 90%;
}

kevincobain2000 avatar Feb 11 '16 06:02 kevincobain2000

Howdy. I have the following setup and would love it if I can have the slide-tabs stick to the top when they reach the top. By default, they will be partially down the screen, below a map. Any thoughts on how I can make the bar sticky just below the header? Thanks!

screen shot 2017-04-05 at 10 04 11 pm

cmvee avatar Apr 06 '17 02:04 cmvee