I need a new Component! (Challenge?)

ionic-v1
42

@RTeran, you could add ion-content inside ion-slide tag and make that slide alone as scrollable area.

43

Hey how do you implement this?

Is it like this??

<tab-slide-box tab="first">

Thanksā€¦

44

Hi @Yomi, it should be tab="1"

45

Thanks very much worked like magic. :smile:

One more thing, the scrolling of content doesnt work properly on each page. After sliding to the right, it doesnt slide back and it keep opeining the side menu. Any solution for this?

46

This is a great component! ,
I am really interested to know how can make the animation of the bottom border of the tab to move also while sliding to another page, so this way it will really look like native android.

did anyone succeed in doing something like this?

47

Hey, iā€™m having trouble getting the slider to initiate on the first tab. I am using two slide box tabs in my app. One of them is inside a modal. Everything is working perfectly besides being able to start at the first slide. Thanks in advance for your help :slight_smile:
Iā€™ve tried editing tabSlideBox.js but I canā€™t seem to get it to start at the first tab.

My code looks like this:

<tab-slide-box tab="1"> <!-- start of tabs (init should be tab 1 / currently not working needs to be fixed) -->
		    	<div class="tsb-icons">
		    		<div class="tsb-ic-wrp">
						<ion-scroll direction="x" class="tsb-hscroll">
						<a href="javascript:;" class="">Profile</a>
						<a href="javascript:;" class="">Focus</a>
						<a href="javascript:;" class="">History</a>
						</ion-scroll>
					</div>
		    	</div>
		        <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
48

I managed to solve my issue by editing around line 65 in tabSlideBox.js

I changed var initialIndex = attrs.tab; to var initialIndex = 0;

This is working for me.

49

Hi wintersmith, i actually had some problems with this, but i found that if you do:

tab-slide-box tab=ā€œ0ā€

than it will work, instead of ā€œ1ā€. but your fix is also working :slight_smile:

50

Thanks for the tip. I had actually tried that before and other variations but none seemed to work. I would like to use this the way it was intended to be used instead of hacking it. Either way, itā€™s working perfectly now (hacked) :stuck_out_tongue:

51

This is really awesome. What Iā€™d love to see is for the tabs to use the actual iconic ion-tabs markup and functionality rather than the custom code provided in the example. Has anyone messed around with trying to get this to work?

52

Hi @saravcts, Can you please give me a demo of using nav-views inside the tab content and be able to navigate back and fro through the different states?

I mean, I should be able to click on an element inside a tab to open its related content and be able to use a nav-view to navigate in history stack.

Thanks in advance :smile:

53

Hi @saravcts, I also observed that the content in ā€˜slidingContent.htmlā€™ is not scrollable in Google Chrome when did ā€˜ionic serveā€™. Am I the only one who is facing this issue?