I need a new Component! (Challenge?)

ionic-v1
21

you rock man!!! awesome! :smile:
just a MINOR thing to change:

I think the icons are a little bit too far on the right.

I changed margin-left: -12px; to margin-left -14px; in class .tabbed-slidebox .tsb-icons:after
Works fine for me now!

Thanks again, it’s awesome! :wink:

22

hey @crissi, actually you can get the tab/item selected by the $ionicSlideBoxDelegate.currentIndex() function!.. :blush:

23

Thanks @manu. I will check this out.

@crissi, currently i position the page at middle tab, I was thinking to add initial tab position when needed and need has come now :smile:

I will try to add this.

24

@crissi, added flexibility to set initial tab. Updated the sample and git link. Please check

1 Like
25

Really great work, @saravcts!

I’m looking for a similar functionality for an app, I’m working on. But instead of centered icons, I’m looking for text tabs, that “extend” beyond the screen, and slide onto the screen when the user swipes between the tabs. An example can be seen in both the Spotify and Skype iOS apps.

Would it somehow be possible to extend on your awesome work to do this?

26

I will take a shot this weekend @morten

27

That sounds great, thanks @saravcts ! Let me know if I can help in any way in terms of styling, etc.!

28

That does look great. It’s a style of navigation used in lots of apps these days and would be great to have in Ionic.

29

Here is the scrollable tabs version: Scrollable tabs slidebox. Let me know what you think. Updated Git also

3 Likes
30

Hey its cool @saravcts you are almost there :smile:

31

Super cool - good work, @saravcts!
I’ll just download from git and play around with it now :slight_smile:

I guess a next step might be to play with the transition between screeens, and have the tabs swipe as you swipe the screen (instead of animating after the transitions)?

32

Tried the scrollable tabs slidebox with a page with a sidebar and here it was not possible to scroll in the tab bar . On a page without a sidebar it works fine. This is probably an ionic bug and not specific to this directive…

33

I’ve been using the scrollable tabs version in an app I’m building, and so far, it works great!

One problem I’m facing though, is that when I want to create the .tsb-icons and ion-slides dynamically using an ng-repeat, the icons are not connected to the slides? I can use $ionicSlideBoxDelegate.update(); to update the ion-slides - but would it be possible to update/re-render the tab-icons somehow using a similar function? Any ideas @saravcts?

34

Here is the fixed version with ng-repeat: http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/slidingTabsUsingRepeat.html#/

Updated git as well.

@crissi, this might be a problem with tabbed slidebox directive in the way I am handling the events. I will check this out.

35

Thats awesome!!

i’m struggeling with displaying the scrollbar on the bottom instead of at the top! Where do I have to adjust the css?

36

@manu, created a version with bottom slider

Changes are slider DOM is moved below the tab content and adjust this CSS .tabbed-slidebox.btm .slider . Hope this will work for you.

1 Like
37

that was fast!! :smiley: thanks man!!

38

Is it possible to add this navigation in to only one page of a tabbed navigation app? I’m having trouble trying to get it to show.

39

Can you share a codepen for this issue?

41

how I could do vertical scroll and the tabs always be maintained on top?