jknorr91 / ion-slide-box-tabs Goto Github PK
View Code? Open in Web Editor NEWAn Add-On directive for the ion-slide-box, that adds tabs to the slide box, known from the Android Material Design specification
License: MIT License
An Add-On directive for the ion-slide-box, that adds tabs to the slide box, known from the Android Material Design specification
License: MIT License
Due to design requirements, I had to add a next and previous buttons that allow the user to traverse the tabs, but was done using $ionicSlideBoxDelegate.next() and as $ionicSlideBoxDelegate.previous(), and when a tab switches to another, the css styling that moves the tab bar scroll and the one that indicates which tab is currently selected isn't applied.
How would be a good way to do this so that the tab bar styles also applies when I procedurally change the current slide?
Hi there,
on the tab I have a badge that binds to a scope variable. When the variable is updated the badge is not. How can this be changed?
Thank you
Hi Jknor, first of all i would like to say amazing work!!
I was trying to make the tab border a bit bigger, like 4px or so to test a design, but i couldn't find in what class to edit it...
Please help me to edit this..
Thanks,
Shaul.
Hi,
Demo links are dead
why no create demo on codepen?
Im having a problem that when I list a dozen of list inside the tab content it wont slide down instead it slide left and right... my question is how do I scroll the content without changing the tab and also how do I scoll the content of the tab that wont affect other tabs ?
i am trying to initiate a different slide than the default (index[0])
i have tried to use $scope.slides.active on the "on/afterEnter" but no luck...
the only progress i made is using "$ionicSlideBoxDelegate.slide(1);" in my "afterEnter", it moves to slide but not the underline indication...
plz help!
How to Set custom positions of tab..i want to set tabs from top 30%
Hi,
I'm trying to do something similar to ng-click when the user selects a specific tab, but setting ng-click on the ion-slide element binds the event to the content and not the tab element itself.
How would I be able to detect when a single tab is selected?
Tabs do not ajust on resize
http://codepen.io/onigetoc/pen/KzVOqg
is it possible to use the ion-slide-tab-label with something like this:
<ion-slide ion-slide-tab-label="Attachments ({{attachments.length}})">
the scope variable attachments is initially '0' after an request it changes i.e. to '5'
for now '0' remains in the tab, but the attachments array changes
@JKnorr91 awesome job! but is it possible to use ng-repeat to load tabs and slide contents?
thanks
I've been trying to place a controller (say one that's grabbing data from a json url) within a tab, but can't seem to get anything working. Any ideas?
The current tab is not selected properly on a Windows Phone Universal (8.1+).
After a bit of debugging I found out that ionicSlideBoxDelegate.currentIndex() return the previous tab index on this OS.
To fix this, add a short timer before the function onSlideChange when the platform is Windows Phone :
scope.onSlideChange = function (slideIndex) { if (ionic.Platform.isWindowsPhone()) { $timeout(function () { slideToCurrentPosition(); }, 50); } else { slideToCurrentPosition(); } };
Regards,
Ghislain
Kindly provide the same for Ionic 2
Here' s a codepen with ion-slide-box-tabs and with content inside being the froala rich text editor.
http://codepen.io/parliament718/pen/ZGoKxG
If you highlight some of the text, you'll see the editor popup.
This only work because I commented out the addEvents()
That is, these following lines cause the issue of being unable to highlight text
ionic.onGesture("dragleft", scope.onSlideMove ,slider[0]);
ionic.onGesture("dragright", scope.onSlideMove ,slider[0]);
ionic.onGesture("release", scope.onSlideChange ,slider[0]);
How can we make these plugins "play nice" with each other?
I am unable to achieve touch events on the lists.
Could u help me out ??
Could you tell me what information you will require so that I can provide the same?
Thank you.
Is there a way to make the tab label ionicons instead of text? Amazing plugin by the way.
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.
Sometime's It doesn't work using ngRepeat, How could i fix it ....No error in Script.. that would - Stop
Heres my code -
`
<div class="batchID" id="batchID-{{itemList.activityDetId}}" ng-style="{'background-color':itemList.activityStatus}"><p class="AisT">D</p></div>
<!--img src="img/ben.png"-->
<!--li class="col">Activity :</div-->
<div class="col">{{itemList.ActivityName}} {{itemList.Unit}}</div>
<!--li class="col">Batch Number :</div-->
<div class="col">{{itemList.BatchNo}}</div>
<!--li class="col">Target :</div-->
<div class="col">{{itemList.DueFromDate}}</div>
<div class="col" >{{itemList.FinishDate}}</div>
<!--li class="col">Name :</div-->
<div class="col">{{itemList.Name}}</div>
<!--li class="col">Activity :</div>
<div class="col">{{itemList.ActivityName}}</div-->
</div>
</div>
</div>
</ion-content>
</ion-slide>
</ion-slide-box>`
$ionicSlideBoxDelegate.next(); use not move indicator
White the Ionic 1.2 version announcement I did some tests to see how the ion-slide-tabs
directive would behave, and it seems to break with the new <ion-slides>
tag.
The offsetWith
attribute seems to be one of the main culprits here, probably doesn't exist in the new implementation that uses Swiper.
Would be great if you would consider adding compatibility to this.
Horizontal scroll is not working and I don't know why. Inspecting elements in Google Chrome, I noticed that "element.style" from ion-scroll contains overflow:hidden, and it overrides "overflow-x: scroll" by default. As you can see in the right of the following image:
If I disable manually "overflow: hidden" from "element.style" it works, but how can I make it works programatically?
Searching deep in "slidingTabsDirective.js" I've also noticed that what turn on "overflow: hidden" is "class="slider-slide-tab"" added in line 28 of the code, but I could not remove this.
Please, someone can help me? It is very important to me because I have to deliver this app as soon as possible.
Ionic Version: 1.2.4
Thanks in advance!
First of all excellent work!
Question 1: Is it possible to active scroll (menu tabs) on android devices or they can only be static?
Question 2: How to call a controller when the tab is changed? Because i have a different views.
Thanks!
Hi,
I am trying to use infinite scroll (ion-infinite-scroll) in your ion-slide-tabs, but on-infinite method keeps called even if I don't scroll the page. I created codepen demo to reproduce this issue.
http://codepen.io/anon/pen/OVjKQK?editors=001
Open your JavaScript console, you see loadMore() is called infinitely.
I tried to put a plugin within a tab that required the usual ionic menu structure of urlRouter. Once I created a normal app in standard ionic structure, I get issues due to the "MainController" deal in the demo. Is there any way to fix this?
Performance is poor when build into android app
using scrollable tabs ! and last tab doesn't show but slide is present. how to solve ?
nice work, I was searching exactly this
I can imagine it is useful for others if you publish this add-on in ionic market
@JKnorr91 do you plan to create a bower module? for faster integration
Hi JKnorr91, thank you for creating this! It's impressive.
I am using your solution for scrollable tab and swipeable slide box in my app and encountered a weird behavior. The app uses ion-side-menu and I want to use ion-slide-tabs inside ion-side-menu-content. You can pull left side menu and select the group of content you want to see. Imagine TODO list tutorial on ionic framework where you can choose projects.
http://ionicframework.com/docs/guide/building.html
This works perfectly in the first group when you launched the app, but there is a problem when:
And I get the content of next slide box below the content of first slide box.
I will create code to reproduce this somewhere when I have time, but do you have anything in mind?
Hi
first of all, thanks for your plugin! :)
But i have found an issue with the ripple effect on tabs. Everything works well on android, but on ios the ripple effect produces a strange shape (not fulfilling the rectangular shape of the tab) and it doesn't disappear when the touch ends
I searched, but i could find a solution for implements this effect, i'd like to use header above the sliding tabs, but it seems that scroll is blocked if i try that, does anyone have a way of doing that?
Thanks
Does anyone knows how to fix too high swipe sensitivity?
Please take a look at this example:
https://www.youtube.com/watch?v=6D5RySbU5Mg&feature=youtu.be
Thanks.
Hi there,
thank you for the slide-box-tabs!
I got an annoying error, debugged it, think it should be
var tabItems = '<li ng-repeat="(key, value) in tabs" ng-click="onTabTabbed($event, key)" ng-class="getTab(key)" class="slider-slide-tab" ng-bind-html="value"></li>';
in row 28 of slidingTabsDirective.js.
just replaced the onTabTabbed($event, {{key}})
with onTabTabbed($event, key)
Regards
Hi Jknorr, I have encountered a strange bug.... I succesfully added the slidebox to a project i am working on and everything works great.
but, if i press on the tabs, and the ripple effect happens, and than i navigate to another page, and than go back to the page with the slidebox, i can see all the tabs get the ripple effect when loading the page again. i am not sure why this happenes... any chance you can fix this?
Thanks,
Shaul.
In ionic 1.2.1 I tested the slide-tabs-scrollable="true" but the tab cannot slide when set it to true with the latest ionic version. On ionic 1.1.1, it was no issue at all.
I would like to make the tabs scrollable and if is possible set the tabs position at the center.Thanks in advance.
I need tabs to be positioned at bottom
Actually I am adding slides dinamically using ng-repeat, and whenever user "pull to refresh" the page, new tabs are added or removed from tabs. I'm controlling this from my controller, but when I change the variable which controls ng-repeat content, the new tabs added not appears, and removed tabs keep showing on previous tabs. How can I update this whenever I want?
Thanks in advance
Ionic loading seem not to be showing on the tabs.
Hi Jknor, i'm very impressed for your slide box tabs,
My question is, how i can use ui-sref or href attribute on ion-slide directive ??
I try this code, but it didn't work
<ion-slide ion-slide-tab-label="Tab1" ui-sref="app.tab1"><ion-nav-view name="tab1"></ion-nav-view></ion-slide> <ion-slide ion-slide-tab-label="Tab2" ui-sref="app.tab2"><ion-nav-view name="tab2"></ion-nav-view></ion-slide>
Thanks for your help,,,
Syaifur
Hi!
Any way to customize the tab so that it will appear below an image?
Thanks in advance for any advise
This is probably a problem coming from the float behaviour on android, but the titles of the tabs are never displaying in the same order after each refresh.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.