saravmajestic / ionic Goto Github PK
View Code? Open in Web Editor NEWCustom Ionic components
Custom Ionic components
Hello, I am using your plugin in my app. Everything is fine till ionic beta 11. I upgraded to ionic beta 1.1.0 and I am seeing issues like nav bar is not getting updated if I use inside ion-slide.
please have a look at my issue posted inionic forum. Any help with this?
http://forum.ionicframework.com/t/ion-nav-view-inside-ion-view/31463
Here is plunker http://plnkr.co/edit/vE90bN?p=preview. If you observe on change of tab slide, icons are not getting updated. Can you tell me how to fix this?
There's a way to set a active slide?
When using scrollable tabs $scope.onSlideMove
does not work. matrix is undefined.
everything only works for default/fixed tabs.
has anyone solved this ?
Hi, this is a great project! It would be amazing if you could somehow add animation to the Tab's border, it will make it look exactly like native :) please add this if you have some time.
Thanks;)
Hi,
Line 134
$timeout(function(){$scope.onSlideMove({"index" : eval(index)});},100);
reports undefined. I commented it out but not sure if it's doing something very crucial.
Please advise. Thanks.
Hi there, thank you for your plugin! I'm finding it very useful for now, apart from the fact that ionSlideBox it's deprecated now.
The ion-slide-box have a bouncing effect on Chrome for Windows like the rest of the components, but on Android every scrollable item stops bouncing excepting the slide. This wouldn't be a big problem, but on my boss' iPad the bounce on that component is behaving crazy...
I'm not getting results with the property hasBounce. My view structure right now is the following (a little weird, but I found it the only way to make my structure and scrolls as I wanted with few CSS tweaks)
<ion-view view-title="Carta">
<tab-slide-box tab="0" class="carta">
<div class="tsb-icons" style="margin-top: 44px;">
<div class="tsb-ic-wrp">
<ion-scroll direction="x" class="tsb-hscroll scroll-view ionic-scroll" >
<div class="tabs">
<a class="tab-item active">Favoritos</a>
<a class="tab-item">Bocadillos</a>
<a class="tab-item">Hamburguesas</a>
<a class="tab-item">Bebidas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
<a class="tab-item">Cervezas</a>
</div>
</ion-scroll>
</div>
</div>
<ion-content style="margin-top: 68px;">
<ion-slide-box show-pager="false" on-slide-changed="updateTab($index)">
<ion-slide>
<ion-list>
<div class="row">
<ion-item ng-repeat="article in articles" href="#/playlists/{{playlist.id}}" class="categories-item col-25" on-hold="holdItem()">
<!-- {{playlist.title}} -->
<div class="card card--expand categories-card">
<div class="item item-divider categories-image" style="height: 200px; color: white;" ng-style="{'background': 'url(/img/categories/{{article.image}}) center / cover'}">
<div class="categories-text-overlay">
<h2 text-scroll>{{ article.name }}</h2>
<p>{{ article.subtitle }}</p>
</div>
</div>
</div>
</ion-item>
</div>
</ion-list>
</ion-slide>
<ion-slide><h1>Bocadillos</h1></ion-slide>
<ion-slide><h1>Hamburguesas</h1></ion-slide>
<ion-slide><h1>Bebidas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
<ion-slide><h1>Cervezas</h1></ion-slide>
</ion-slide-box>
</ion-content>
</tab-slide-box>
</ion-view>
Hi,
Is there any way to select a particular tab from controller dynamically?
The second tab here is not scrollable
Hello,
Please add a package.json file in order to install your package from npm.
Hi
Thank you for your ionic-tabbedSlideBox. I've created a bower component for this ionic tabbedSlidebox. The bower component isn't yet registered in the public bower repository.
Take a look at my tabbedSlidebox fork: https://github.com/paroos/ionic-tabbedslidebox
I can make a pull-request, but I don't know if you want more than one specific ionic component in your ionic repo.
Regards, Patrick
Many thanks for sharing this!
Could you explain how to switch between the icon based appearance (with the arrow) to the text-only based appearance (underlined). It's quite hard to reverse-engineer it.
Hello, great work by the way!
I saw the initial tab is set up on 0 but on the preview, it starts with the middle tab.
Is there any special way to change that so it will show the first tab? or is it a bug or something?
THanks.
Hi,
Thank you for this great component. I am using and recommending this by the way. It would be great if the scrollable tabs support scrollable content as well. If I understood completely in your examples, you placed the slideboxes inside the ion-content which scroll was set to false. It would be nice if it is the other way around like the ion-content inside the slidebox. Just like the scrollable tabs in android http://developer.android.com/design/building-blocks/tabs.html
Hope you can include this feature in your next version. Thanks once again.
Hello, thanks for your great work, i'm having an issue, i can't use your plugin with each sliding tab having their own infinite-scroll and pull-and-refresh.
Thanks!
<tab-slide-box tab="0">
<div class="tsb-icons">
<div class="tsb-ic-wrp">
<ion-scroll direction="x" class="tsb-hscroll">
<a href="javascript:;"
class="{{tab.icon}}"
ng-repeat="tab in home.tabs"
ng-click="home.goTo($index)"
ng-class="{'active' : home.currentTab == $index}"
on-finish-render="home.test()"
>
{{tab.text}}
</a>
</ion-scroll>
</div>
</div>
<ion-slide-box
show-pager="false"
on-slide-changed="slideHasChanged($index)"
>
<ion-slide>
<ion-content>
<ion-list class="noticias-list">
<ion-item ng-repeat="homilia in home.homilias">
<a class="item item-thumbnail-left item-text-wrap" ui-sref="homiliaDetails({'data' : homilia.id })">
<div class="noticia-image pageBackground" show-once-background-loaded="{{homilia.image}}"></div>
<div class="item-text">
<h2 ng-bind-html="homilia.titulo"></h2>
<p>{{homilia.fecha}}</p>
</div>
</a>
</ion-item>
</ion-list>
<ion-infinite-scroll
immediate-check="false"
ng-if="home.noMoreHomilias"
on-infinite="home.getHomilias()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
</ion-slide>
</ion-slide-box>
</tab-slide-box>
I believe this repo is inappropriately named. This causes collisions with the ionic lib when attempting to install via bower. A simple solution is to rename the repo ionic-tabbed-slide-box
.
hi,saravmajestic
how to used into the ionic2 or have one of the support v2 --ts version?
When I use ng-repeat with {{tab in tabs}}
, not add class="active"
with tab.text in firstview of default.html.
But There is no problem after I flick.
app.controller("IndexCtrl", ['$rootScope', "$scope", "$stateParams", "$q", "$location", "$window", '$timeout',
function($rootScope, $scope, $stateParams, $q, $location, $window, $timeout){
$scope.tabs = [
{"text": "A"},
{"text": "B"},
{"text": "C"},
{"text": "D"},
{"text": "E"}
]
$scope.slideBox = [
{
id: 0,
title: '0something here',
view: "132"
},
{
id: 1,
title: '1text here',
view: "232"
},
{
id: 2,
title: '2something here',
view: "432"
},
{
id: 3,
title: '3text here',
view: "233"
},
{
id: 4,
title: '4something here',
view: "1da"
}
];
}
]);
<tab-slide-box tab="0" >
<div class="tsb-icons">
<div class="tsb-ic-wrp">
<a ng-repeat="tab in tabs" href="javascript:;">{{tab.text}}</a>
</div>
</div>
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="slide in slideBox">
<h3>{{slide.title}}</h3>
</ion-slide>
</ion-slide-box>
</tab-slide-box>
Hi,
I use this component, but it would be nice if the tab change were as Polymer.
http://www.polymer-project.org/components/paper-tabs/demo.html
Platform: Android 5.1.1
After updating to 1.2.1 from 1.1, zooming and pinch seems broken in the ion-scroll, there is my code:
HTML:
<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false" active-slide="activeSlide">
<ion-slide ng-repeat="image in allImages">
<ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false"
zooming="true" min-zoom="{{zoomMin}}" style="width: 100%;height: 100%"
delegate-handle="scrollHandle{{$index}}" on-scroll="updateSlideStatus(activeSlide)"
on-release="updateSlideStatus(activeSlide)">
<div class="image" style="background-image: url({{image}})"></div>
<!--<img class="full-image" ng-src="{{image}}">-->
</ion-scroll>
</ion-slide>
</ion-slide-box>
JS:
$scope.updateSlideStatus = function (slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle("scrollHandle" + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$ionicSlideBoxDelegate.enableSlide(true);
} else {
$ionicSlideBoxDelegate.enableSlide(false);
}
};
Hi, on android 4.4/5.0 and 6.0 scroll working perfect, but if launch on 6.0.1 (SM-G935) scrolling in has bounce and 'render' last element to display. any solution?
When executing (demo's as well)
Error: matrix is undefined
It's possible <tab-slide-box>
inside another </tab-slide-box>
?
As the title
I use the tabbedSlideBox with 3 tabs, each of them containing an ion-list. If i scroll a list and change the slide page, the list scroll back to the top.
I've checked you're demo and it does the same thing...so it's a bug of this repo, because as far as i know common ionic slide box should remember scroll position by default
Evrythng worked suprb bt All content in slide tab is centered..how to remove center alignment?
Hi,
tnx for this amazing library!
I have a problem, the content of the slide (a list of items) it's cut! Any ideas on how to fix it?
thxs
link for error video: http://www.itmakers.it/video-error/rightmeal.mov
Thanks for this awesome library.
It was working very well before the Ionic 1.3 release. But it has some problem after I updated ionic.
It flicks the page towards upside and also the next page does not show on slide until we select the tab . Can you please guide what changes could work.
Such a shame much needed plugin for ionic.
I would pay for this plugin if it meant that it got updated.
Hello,
after updating to 1.2 ionic component Tabbed Slidebox a bugs.
Here's an example http://codepen.io/dandroid/pen/MKaQOr
ideas for solutions?
Thank you
Hi,
Great work!
I have an issue with::
It points to first icon but it doesn't add the "active" class. Anyone else can replicate?
Thanks, Great work again!
I'm trying to use on modal in Ionic, but doesn't work. I tried to put the same code on my view and there it's working well... How do I to fix it?
This is my code:
<tab-slide-box> <div class="tsb-icons"> <div class="tsb-ic-wrp"> <ion-scroll direction="x" class="tsb-hscroll"> <a href="javascript:;" class="ion-home1">Home</a> <a href="javascript:;" class="ion-ios-game-controller-b1">Games</a> <a href="javascript:;" class="ion-email1">Email</a> <a href="javascript:;" class="ion-model-s1">Car</a> <a href="javascript:;" class="ion-person1">Profile</a> <a href="javascript:;" class="ion-heart1">Favourites</a> <a href="javascript:;" class="ion-chatbubbles1">Chats</a> <a href="javascript:;" class="ion-gear-b1">Settings</a> <a href="javascript:;" class="ion-camera1">Photos</a> <a href="javascript:;" class="ion-ios-paw1">Pets</a> </ion-scroll> </div> </div> <ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)"> <ion-slide> <h3>Home content</h3> </ion-slide> <ion-slide> <h3>Games content</h3> </ion-slide> <ion-slide> <h3>Mail content</h3> </ion-slide> <ion-slide> <h3>Car content</h3> </ion-slide> <ion-slide> <h3>Profile content</h3> </ion-slide> <ion-slide> <h3>Favourites content</h3> </ion-slide> <ion-slide> <h3>Chats content</h3> </ion-slide> <ion-slide> <h3>Settings content</h3> </ion-slide> <ion-slide> <h3>Photos content</h3> </ion-slide> <ion-slide> <h3>Pets content</h3> </ion-slide> </ion-slide-box> </tab-slide-box>
Does it have a bower module?
Thank's.
My paths are correct and I have the latest version of Ionic running. Any suggestions?
Hey thanks for this cool module. But there is no licence, so how should I handle this legally?
Hi,
I have a toggle in my app.
If I choose the third element (for example) and then I click on my toggle, the tab returns in initial position...
Do you know this issue ?
For use it like the normal ion-tabs
While the user scrolls a scrollable content vertically the tabs get changed . like the slides are too sensitive ,
its a annoying experience when user tries to scroll vertically but the tabs are changed ! It doesnt give android like feel.
Nice work btw ! Hope this can be solved
I've found a solution for the problem of the height of the tabs, otherwise all the tabs have the same height even if one has less element.
Into the controller i've create a function which is called when the tab change and is passed the $index of the element and in this method i've put this lines of code:
`
$scope.update = function(index){
angular.element(".slider")[0].style.height = "auto";
var height = angular.element(angular.element("ion-slide")[index]).height();
angular.element(".slider")[0].style.height = height + "px";
}
`
Try this and let me know if it works.
Hope it could help someone else :)
Amazing Work ! I find difficulty when i use it dynamically adding content for each slide. e.g. let's say top tab bar have tabId & tabText (P.S. I am not talking about onSlideMove data.index of slidebox) is there any way that i can request tabId to get data for slide respectively.
Hello, I am using tabbed slide box in my app. every thing works fine till beta 13. In beta 14, nav bar is not showing icons based on tab selection. It is always showing nav icons of last tab. Can some help me with this?
I created a plunk and posted this in ionic forum. http://forum.ionicframework.com/t/beta-14-nav-bar-is-not-showing-nav-buttons-with-ion-slide-change/15305.
Here is plunk: http://plnkr.co/edit/bzf6Fj?p=preview
when using dir=''rtl'' on changing tabs it shows wrong slide boxes.
Hi,
Thank you for this great plugin!
I've notice that in your example with scrollable content (https://github.com/saravmajestic/ionic/blob/master/tabbedSlideBox/slidingContent.html) the end of the content is not displayed after the scroll. I mean, you can see it if you bounce the content, but then the scroll stops where it is not possible to see the last item.
It seems that the ion-scroll content is higher than its parent viewport.
Can you check this?
Thank you
Pleaseeeeeeeeeee help!!
The dummy data test of the plugin is working perfectly.
But when i generate the tabs dinamically using ng-repeat it doesn't work.
This is a simple example of taking the data from an object:
$rootScope.data_test = {};
$rootScope.data_test.days = ['Day 1','Day 2'];
<tab-slide-box>
<div class="tsb-icons">
<div class="tsb-ic-wrp">
<a href="javascript:;" class="ion-home" ng-repeat="day in data_test.days track by $index"></a>
{{ day }}
</div>
</div>
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
<ion-slide>
<h1>Day 1 content</h1>
</ion-slide>
<ion-slide>
<h1>Day 2 content</h1>
</ion-slide>
</ion-slide-box>
</tab-slide-box>
What can i do?
There is something i am missing?
Thank you!
Hi While Scrolling the content the content slide is changing but the current tab is in out of view how to solve this ?
Hi,
The plugin is just perfect on Android but I have troubles in iOS.
Both my tabs and slides are dynamically set using an HTTP service. In iOS the first slide loads perfect and when changing to next slide, I'm fetching the contents from another service. The View binding is working, but the contents just doesn't display on the screen. But, this scenario is perfect in Android and I have dynamic content loading onSlideMove
.
On the DOM, I observed that the CSS transform
, translate
, left
etc are not set properly in iOS platform. Could this be the issue? Could you please help?
Thanks.
How to use js dynamic switching TAB page , now only re- initialization of the specified page which is currently displayed page .
The data is not rendering if it is from an http call. Once you resize the browser window then everything is working fine. In mobile, as we can't resize the window, it's not showing any data. Please have a look at this plunker.
Hi Saravmajestic,
Great work on Tabbed slidebox. We are trying it use it with little modifications, We are using ion-content inside of ion-slide so that content is scrollable list. However we also need the tsb icons scroll block to be fixed when list is scrolled in various slides. Can you suggest some clean way of doing it, It seems position fixed wont work in ionic too.
Thanks in adavance.
Hello,
When I swipe slide, the previous slide content goes up, I think this is bad for UX.
How can I prevent it to go up ?
Thanks
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.