jknorr91 / ion-slide-box-tabs

An Add-On directive for the ion-slide-box, that adds tabs to the slide box, known from the Android Material Design specification

ion-slide-box-tabs

This Directive adds Tabs for the Ionic Slidebox with moving indicator at the bottom.

Preview & Demo

Demo1

Demo2

Installation

1. Add the slidingTabsDirective.js to your Ionic Project and include it in your index.html.

Example: If you put the slidingTabsDirective.js to your js folder, you should paste the following line into your index.html anywhere after the ionic inclusion.

<script src="js/slidingTabsDirective.js"></script>

2. Add the SCSS or the CSS code from slidingTabs.scss or slidingTabs.css to your project Styles.

Usage

In order to use the Tabs with an existing SlideBox, add the ion-slide-tabs Attribute to the ion-slide-box Element. To name the Tabs you should add the Attribute ion-slide-tab-label="yourLabel" to the slides of the Slidebox. You can paste in any HTML for the labels.

Example:

<ion-content scroll="false">
    <ion-slide-box show-pager="false" ion-slide-tabs>
        <ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
        <ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
        <ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
    </ion-slide-box>
</ion-content>

API

Currently there ist only one attribute to change the behaviour of the tabs:

Attribute	Type	Default	Description
slide-tabs-scrollable	boolean	true	Wheter the tabs should be scrollable (true) or fill up the viewport width (false). In case of false, every tab will have the same size.

Styling

I gave my best to give the tabs the look & feel of the Android Tabs, described in Google's Material Design specification. If you want to give the tabs your own look, feel free to edit the styles in slidingTabs.scss or slidingTabs.css.

Donate

If you like my work and want to say thanks, you can buy me a beer or a cup of coffe.

ion-slide-box-tabs's Issues

Ripple effect shows on all tabs after pressing them, going to another page, and going back

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.

dynamic ion-slide-tab-label

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

Tabs below image

Hi!

Any way to customize the tab so that it will appear below an image?
Thanks in advance for any advise

Ionic 1.2 <ion-slides> compatibility

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.

Question: Controller Content within Tab?

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?

Header above sliding tabs

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

Error

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

last tab label disappears but slide is present.

using scrollable tabs ! and last tab doesn't show but slide is present. how to solve ?

Question: How to get the current selected tab

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?

On iOS device/simulator tabs going offscreen are not scrollable or shown

On iOS device/simulator tabs that are offscreen are not scrollable or shown, but they are scrollable/appear in Android device or ionic lab in chrome.

iOS simulator/device screenshot with the issue:

ionic lab on chrome with offscreen tabs showing correctly:

how to init a slide on enter

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!

Scrolling bug

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.

Question: How to keep tab transition styles when procedurally changing slides?

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?

Structure Issue?

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?

A controller for each tab?

How use this in ionic2?

Ionic 1.2.1 <slide-tabs-scrollable="true"> compatibility

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.

How to set tabs to bottom

I need tabs to be positioned at bottom

Can't change tab border height

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.

how to make the tabs scrollable ?

I would like to make the tabs scrollable and if is possible set the tabs position at the center.Thanks in advance.

Ion - list touch events in the tabs.

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.

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

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.

Position of tabs

How to Set custom positions of tab..i want to set tabs from top 30%

Enable tabs scroll on android

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!

ion-infinite-scroll keep called within ion-slide-tabs

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.

Can't scroll inside the tab content

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 ?

ui-sref or href don't work on ion-slide directive

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

bower module

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

$ionicSlideBoxDelegate issue

$ionicSlideBoxDelegate.next(); use not move indicator

Issue with ion-side-menus

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:

1. open side menu
2. select another group (to switch to another group and replaced the content)
3. close side menu
4. swipe to next slide box

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?

How to update tabs (insert/remove) dinamically with ng-repeat

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

A bit laggy on release gensture when tab item transition

ion-slide-tab-label with ionicons

Is there a way to make the tab label ionicons instead of text? Amazing plugin by the way.

Performance is poor when build into android app

Performance is poor when build into android app

Header spacing off on Android device

The header spacing is inconsistent on my android device. It looks fine when running in the browser, but it seems to be off only on the device.

Need sliding Tabs for Ionic 2

Kindly provide the same for Ionic 2

Tab-indicator stop moving when used ng-repeat

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>`

Should resize automatically?

Tabs do not ajust on resize
http://codepen.io/onigetoc/pen/KzVOqg

Freeze headers on scroll in <ion-slide-box>

Hello,

I am using in my mobile app. When scrolled in y-direction to fill up the fields, my tab headings go up.

I want to freeze the tab headers just as my main header. Can anyone please help.

Demo links are dead

Hi,
Demo links are dead
why no create demo on codepen?

Horizontal scroll not working. <slide-tabs-scrollable=true> not working !!

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!

Current tab is not selected on Windows Phone Universal (8.1+)

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

Random titles order on Android

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.

Possible to dynamically render the tabs and slides?

@JKnorr91 awesome job! but is it possible to use ng-repeat to load tabs and slide contents?

thanks

Ionic Loading no showing

Ionic loading seem not to be showing on the tabs.

Ripple effect, strange behaviour on ios

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

How to update badge in ion-slide-tab-label?

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

can't select/highlight text inside content

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?