h2oh2oh2o
The demo works perfect and really appreciate for sharing it to the community. I will integrate it to my next project. Thank you!
swiped tab
tab ,swiped tab,slidingTabsDirective
Free!
Soufien Karray
Member since 2015
Details
- Version:
- 1.0
- Size:
- 2mb
- Ionic:
- 1.0 beta,1.0.x,1.3.x
- Platforms:
- Android
- View ID:
- c664193e
- Released:
- 8 years ago
- Updated:
- 7 years ago
- Category:
- Plugins
- Tags:
- tab, swiped tab
Github lik: https://github.com/newsof1111/ionic_swiped-tabs-v1.1
An example of using with ng-repeat with less loading time : Github Link
The same example with the slidingTab in bottom: Github Link
A smart Sliding tabs based in slidingTabsDirective.js All Tabs are controlled in one controller and every tab can include a external template enjoy it ;) ******THIS WORK IS BASED IN slidingTabsDirective.js SO THIS IS JUST A COMPLEMENTED WORK :)
Happy coding
Made with LOVE
Other Popular Plugins:
Karray Soufien
Computer Science Engineer
Ionic/Angular/Laravel Developer
Send Mail at: karraysoufien@gmail.com
Hey there! You'll need to log in before you can leave a comment here.
harith
Can the swiped tab work with badges?
Soufien Karray
//sorry for late ;), try this code in tab-chats.html <style> .slider-slide-tab span:last-child {border-radius: 10px; background:#ef473a;padding: 3px 8px; color: white; position: relative; bottom: 8px; left: 5px; font-weight: bold;box-shadow:0 0 1px #333; } </style> <div class="bar bar-header bar-dark" style="height: 80px;"> <br></br> <h1 class="title titre" style="line-height: 60px;top: 15px;">stylovitsh</h1> </div> <ion-view view-title="Sliding Tabs 1" style="margin-top: 80px;"> <ion-content scroll="false"> <button class="button button-light"> button-light </button> <ion-slide-box slide-tabs-scrollable="true" show-pager="false" ion-slide-tabs> <ion-slide ion-slide-tab-label="{{Height}}"><div ng-include src="'templates/chats.html'" style="height: {{Height}}px;"></div></ion-slide> <ion-slide ion-slide-tab-label="another tab <span>2</span>"><div ui-view="e" class="col col-dynamic-40" dynamic-md-layout></div></ion-slide> <ion-slide ion-slide-tab-label="tab3"><h1>Tab 3</h1><button ng-click="nextSlide()" >Next slide!</button></ion-slide> <ion-slide ion-slide-tab-label="another tab again"><h1>Tab 4</h1><button ng-click="nextSlide()">Next slide!</button></ion-slide> <ion-slide ion-slide-tab-label="a very large tab"><h1>Tab 5</h1><button ng-click="nextSlide()">Next slide!</button></ion-slide> <ion-slide ion-slide-tab-label="tab6"><h1>Tab 6</h1><button ng-click="nextSlide()">Next slide!</button></ion-slide> </ion-slide-box> </ion-content> </ion-view>
Soufien Karray
this slide can swipe over width in safari and iOS, someone fix this or disable swipe? this plugin is created for android only (Platforms:Android) i tried to fix it .please download again and tell us with screen shot if you have any problem :)
Juan David Nicholls
Any example in Codepen? Repo on Github?
Romuald Zbignev Zhabik
Amazing! Have a question with integration WP-API. How use your tabs with ng-repeat Categories and ng-repeat Post in different Category? WP-API responce for categories http://demo.wp-api.org/wp-json/wp/v2/categories and responce for Posts in category http://demo.wp-api.org/wp-json/wp/v2/posts/?filter[category_id]=7
Soufien Karray
thank you romuald, did you check my example using ng-repeat ? there is 3 github link in description . did they helps you ? if not plz contact me in karraysoufien@gmail.com :)
Romuald Zbignev Zhabik
Ok! It's possible use Swiped Tabs with ui-router? Fo example after click or swipe to tab change route to some ID, like: .state('app.view', { url: "/view/:catID", templateUrl: "template/view.html" }) Where catID it's category ID from responce? Thank you!
Harpreet
Is there a option to make a particular tab as default, so that on reload or switching from a different view takes straight to the default tab...Currently I see a flicker on page load, the last slide content shows and switches back to the first slide content... So there should be a way to make a particular ion-slide as default
Soufien Karray
did you test( active-slide) property ? http://ionicframework.com/docs/api/directive/ionSlideBox/ <ion-slide-box slide-tabs-scrollable="true" show-pager="false" ion-slide-tabs active-slide="2"> .............................................................; </ion-slide-box> //make the tab of index 2 as defult
Guillermo
Hello, I downloaded the zip, and I find I can not do swipe in android. I am with ionic serve --lab. I generated the android apk and swipe does not work. In IOS, it works perfect. Thank you for your attention, is this possible? Could you tell me if there is an updated version that corrects the error, if there is an error? Thank you very much !
Harpreet
Pull in the latest code from here: https://github.com/newsof1111/ionic_swiped-tabs-v1.1 This works for me on android and iOS both.
mean sereirith
Hello its disable my side menu and I want my side menu to work only when it is in the first tab is it possible to do so? Thank you very much!
Anoop George Thomas
shall i use it in IONIC 2
Soufien Karray
i will ,but under the next 3 month :p ,sorry i have many commitments :/, if you want ping me via email and i will send you when i will start ;) karray.soufien.ipsas@gmail.com
Soufien Karray
Thomas, this is the first step of making swiped tabs in ionic 2 , you can test it (its not a plugin ) just a manipulation of segments + slides this example works with 2 tabs for now ;) https://github.com/newsof1111/ionic2-swipedTab-OpenProject
Bhaumik
this example not works for dynamic content in segment.as text 10 segment should be text wrap. so i use slides instead of segment but when we slide, last slide move to left side and white space display at end. is there any solution to prevent this white space?
amit gadhiya
thank for such a nice plugin if works fine. Only thing is it is not working properly if i use ng-repeat like <ion-slide ng-repeat="catg in catgs" ion-slide-tab-label="{{catg.name}}"></ion-slide>
Soufien Karray
hi mr amit can you ping me in my email :karray.soufien.ipsas@gmail.com i make an example for you ;)
Miladi Mohamed
Hi Soufian, awesome work. I'm facing the same issue using ng-repeat. Does your plugin support it?
Soufien Karray
i make a small example using ng-repeat and i tried to make it the fastest possible : https://github.com/newsof1111/SwipedTab-with-ng-repeat test it and ping me if you have any problem :)
Ive Botunac
Very nice plugin and works fine. Is there is a way for hide header and move up this tab on scroll? Like on WhatsApp or some other apps? Thanks
Soufien Karray
i will make a starter app will all this things ;) in theses few days ping me via karraysoufien@gmail.com to be the first download :p
Erlan Zhumanasyrov
This is amazing! Soufien, i have some problem. I was put js & css files, when i swipe to left side my menu is opened. Hove can i solve, please help me! Thank you
Soufien Karray
thank you Erlan, sorry for this late response :/ can you try $ionicSideMenuDelegate.canDragContent(false); if you want to disable the menu drag ,so you can disable it for all page or you can enable it just at the first and the last if you want more detail please send me an email in karraysoufien@gmail.com
Erlan Zhumanasyrov
@SoufienKarray i make like this. http://codepen.io/Zhumanasyrov/pen/jyrEJe . in horizontal scrolling and your swipe is working amazing, but when i swiped some information from left to right will opened menu. How can solve this issue? Thank you! Best Regards.
Andal
Disable the horizontal scroll bar(iOS) by adding the below mentioned style in your html page <style> ::-webkit-scrollbar { display: none; } </style>
Andal
Disable the horizontal scroll bar(iOS) by adding the below mentioned style in your html page <style> ::-webkit-scrollbar { display: none; } </style>
Erlan Zhumanasyrov
This is amazing! Soufien, i have some problem. I was put js & css files, when i swipe to left side my menu is opened. Hove can i solve, please help me! Thank you
Soufien Karray
thank you Erlan, sorry for this late response :/ can you try $ionicSideMenuDelegate.canDragContent(false); if you want to disable the menu drag ,so you can disable it for all page or you can enable it just at the first and the last if you want more detail please send me an email in karraysoufien@gmail.com
Erlan Zhumanasyrov
@SoufienKarray i make like this. http://codepen.io/Zhumanasyrov/pen/jyrEJe . in horizontal scrolling and your swipe is working amazing, but when i swiped some information from left to right will opened menu. How can solve this issue? Thank you! Best Regards.
Ive Botunac
Very nice plugin and works fine. Is there is a way for hide header and move up this tab on scroll? Like on WhatsApp or some other apps? Thanks
Soufien Karray
i will make a starter app will all this things ;) in theses few days ping me via karraysoufien@gmail.com to be the first download :p
amit gadhiya
thank for such a nice plugin if works fine. Only thing is it is not working properly if i use ng-repeat like <ion-slide ng-repeat="catg in catgs" ion-slide-tab-label="{{catg.name}}"></ion-slide>
Soufien Karray
hi mr amit can you ping me in my email :karray.soufien.ipsas@gmail.com i make an example for you ;)
Miladi Mohamed
Hi Soufian, awesome work. I'm facing the same issue using ng-repeat. Does your plugin support it?
Soufien Karray
i make a small example using ng-repeat and i tried to make it the fastest possible : https://github.com/newsof1111/SwipedTab-with-ng-repeat test it and ping me if you have any problem :)
Anoop George Thomas
shall i use it in IONIC 2
Soufien Karray
i will ,but under the next 3 month :p ,sorry i have many commitments :/, if you want ping me via email and i will send you when i will start ;) karray.soufien.ipsas@gmail.com
Soufien Karray
Thomas, this is the first step of making swiped tabs in ionic 2 , you can test it (its not a plugin ) just a manipulation of segments + slides this example works with 2 tabs for now ;) https://github.com/newsof1111/ionic2-swipedTab-OpenProject
Bhaumik
this example not works for dynamic content in segment.as text 10 segment should be text wrap. so i use slides instead of segment but when we slide, last slide move to left side and white space display at end. is there any solution to prevent this white space?
mean sereirith
Hello its disable my side menu and I want my side menu to work only when it is in the first tab is it possible to do so? Thank you very much!
Harpreet
Is there a option to make a particular tab as default, so that on reload or switching from a different view takes straight to the default tab...Currently I see a flicker on page load, the last slide content shows and switches back to the first slide content... So there should be a way to make a particular ion-slide as default
Soufien Karray
did you test( active-slide) property ? http://ionicframework.com/docs/api/directive/ionSlideBox/ <ion-slide-box slide-tabs-scrollable="true" show-pager="false" ion-slide-tabs active-slide="2"> .............................................................; </ion-slide-box> //make the tab of index 2 as defult
Juan David Nicholls
Any example in Codepen? Repo on Github?
Romuald Zbignev Zhabik
Amazing! Have a question with integration WP-API. How use your tabs with ng-repeat Categories and ng-repeat Post in different Category? WP-API responce for categories http://demo.wp-api.org/wp-json/wp/v2/categories and responce for Posts in category http://demo.wp-api.org/wp-json/wp/v2/posts/?filter[category_id]=7
Soufien Karray
thank you romuald, did you check my example using ng-repeat ? there is 3 github link in description . did they helps you ? if not plz contact me in karraysoufien@gmail.com :)
Romuald Zbignev Zhabik
Ok! It's possible use Swiped Tabs with ui-router? Fo example after click or swipe to tab change route to some ID, like: .state('app.view', { url: "/view/:catID", templateUrl: "template/view.html" }) Where catID it's category ID from responce? Thank you!
Soufien Karray
this slide can swipe over width in safari and iOS, someone fix this or disable swipe? this plugin is created for android only (Platforms:Android) i tried to fix it .please download again and tell us with screen shot if you have any problem :)
harith
Can the swiped tab work with badges?
Soufien Karray
//sorry for late ;), try this code in tab-chats.html <style> .slider-slide-tab span:last-child {border-radius: 10px; background:#ef473a;padding: 3px 8px; color: white; position: relative; bottom: 8px; left: 5px; font-weight: bold;box-shadow:0 0 1px #333; } </style> <div class="bar bar-header bar-dark" style="height: 80px;"> <br></br> <h1 class="title titre" style="line-height: 60px;top: 15px;">stylovitsh</h1> </div> <ion-view view-title="Sliding Tabs 1" style="margin-top: 80px;"> <ion-content scroll="false"> <button class="button button-light"> button-light </button> <ion-slide-box slide-tabs-scrollable="true" show-pager="false" ion-slide-tabs> <ion-slide ion-slide-tab-label="{{Height}}"><div ng-include src="'templates/chats.html'" style="height: {{Height}}px;"></div></ion-slide> <ion-slide ion-slide-tab-label="another tab <span>2</span>"><div ui-view="e" class="col col-dynamic-40" dynamic-md-layout></div></ion-slide> <ion-slide ion-slide-tab-label="tab3"><h1>Tab 3</h1><button ng-click="nextSlide()" >Next slide!</button></ion-slide> <ion-slide ion-slide-tab-label="another tab again"><h1>Tab 4</h1><button ng-click="nextSlide()">Next slide!</button></ion-slide> <ion-slide ion-slide-tab-label="a very large tab"><h1>Tab 5</h1><button ng-click="nextSlide()">Next slide!</button></ion-slide> <ion-slide ion-slide-tab-label="tab6"><h1>Tab 6</h1><button ng-click="nextSlide()">Next slide!</button></ion-slide> </ion-slide-box> </ion-content> </ion-view>
h2oh2oh2o
The demo works perfect and really appreciate for sharing it to the community. I will integrate it to my next project. Thank you!
Guillermo
Hello, I downloaded the zip, and I find I can not do swipe in android. I am with ionic serve --lab. I generated the android apk and swipe does not work. In IOS, it works perfect. Thank you for your attention, is this possible? Could you tell me if there is an updated version that corrects the error, if there is an error? Thank you very much !
Harpreet
Pull in the latest code from here: https://github.com/newsof1111/ionic_swiped-tabs-v1.1 This works for me on android and iOS both.
Hey there! You'll need to log in before you can leave a rating here.
Kewal
This is great
Steeve
Nice work
Hannabal
Awesome :)
leo3cu
Nice
leo3cu
Nice
this slide can swipe over width in safari and iOS, someone fix this or disable swipe?
amit gadhiya
Excellent work, Keep Going
SOURAV DAS
awesome..Keep posting more
Romuald Zbignev Zhabik
Awesome
William Young
Nice!
Rishikesh Vedpathak
Nice
{{ rating.comment }}
{{ rating.comment }}
Rishikesh Vedpathak
Nice
William Young
Nice!
Romuald Zbignev Zhabik
Awesome
SOURAV DAS
awesome..Keep posting more
amit gadhiya
Excellent work, Keep Going
Steeve
Nice work
leo3cu
Nice
leo3cu
Nice
Hannabal
Awesome :)
Kewal
This is great
this slide can swipe over width in safari and iOS, someone fix this or disable swipe?