I'd like to do the above app Tutorial effect using Onsen UI.
However, in the Page Patterns of Onsen UI, I didn't see anything similar.
Could someone shed some light on this?
Much appreciated.
I think what you're looking for is a carousel. You can make one using the <ons-carousel> component.
In this case you want to have a swipeable fullscreen carousel so you can define it like this:
<ons-carousel swipeable overscrollable auto-scroll fullscreen>
<ons-carousel-item>
Content #1
</ons-carousel-item>
<ons-carousel-item>
Content #2
</ons-carousel-item>
</ons-carousel>
Here is a simple example of a fullscreen carousel:
http://codepen.io/onsen/pen/xbbzOQ
Please also take a look at the docs:
http://onsen.io/reference/ons-carousel.html
If you want bullets, you can use the carousel.getActiveCarouselItemIndex() in order to get the current active element.
<ons-carousel-cover>
<div class="bullets">
<span
ng-repeat="idx in indices"
ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
•
</span>
</div>
</ons-carousel-cover>
You also need to trigger a digest event to make Angular understand that something changed.
This is the code:
http://codepen.io/argelius/pen/RWomrz
Related
Hi I have a ribbon with some div's in a row within. If it overlaps and you can not see everything, I show an arrow left from the ribbon and an arrow right of the ribbon. With this arrows I can scroll throught the ribbon infinite in the circle (direction left or right).
My codes lookes like this:
<div class="arrow" ng-click="list.push(list.shift())>←</div>
<div class="ribbon">
<div class="ribbonItem" ng-repeat="item in list">
{{ item.Name }}
</div>
</div>
<div class="arrow" ng-click="list.unshift(list.pop())>→</div>
This works, but it's without an animation and increased. It also needs much clicks to scroll throught. How can I implement an animation without using jquery or js and just do it with this ng-click. I tried it with a transition on the css-classes ng-enter/ng-leave of my ng-repeat, but it does'nt work: https://docs.angularjs.org/api/ng/directive/ngRepeat (look at "Animations").
Has someone an idea?
Thanks.
Similar question : how to use animation with ng-repeat in angularjs
Go through this link it might help you:
http://www.nganimate.org/angularjs/ng-repeat/move
We have an Angular site using UI Bootstrap & UI-Router
When in collapsed mode, if you click any open with a drop down, the menu re-collapses before the user can see the dropdown options.
Here's a plunker:
https://plnkr.co/edit/73s4kuFR2c9EuhMd6G4l
.... Why is SO making me paste code if I have a plunkr link ??
See plunker link for code example.
What am I overlooking?
-Thanks
You must remove ng-click="navCollapsed = true" from your div.collapse.navbar-collapse
It should look like this:
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
It will stop the wrong behavior.
I am building an app using Ionic and am utilising the directive <ion-tabs></ion-tabs>
Each tab directive is as standard, eg:
<ion-tab title="Sync" icon-off="ion-android-sync" icon-on="ion-android-sync" href="#/tab/sync"><ion-nav-view name="tab-sync"></ion-nav-view></ion-tab>
When the app is busy syncing I'd like that static "ion-android-sync" to animate.
I see there is <ion-spinner></ion-spinner> to show spinners but I'm not sure of how to show an animated spinner icon inside a tab - anyone know how to do this?
I do not have a definitive solution for you and I am not sure whether this is the best way to do this, but in my opinion the best way to achieve this would be to dissect the <ion-tab> element, which would result in the following:
<a class="tab-item" href="#/tab/sync">
<i class="icon"><ion-spinner></ion-spinner></i>
</a>
Unfortunately, I couldn't find a spinner that looks like the ion-android-sync icon you used. And of course, more code would be necessary to make this switch between icons, but it is a start.
I need to implement an horizontal swipe menu like this:
http://jsfiddle.net/9zuxH/447/
<div class="categories">
<ul>
<li><span>ABCDEF</span></li>
<li><span>DEF</span></li>
<li><span>GHI</span></li>
<li><span>JKL</span></li>
<li><span>ABC</span></li>
<li><span>DEF</span></li>
<li><span>GHI</span></li>
</ul>
</div>
The problem is that it is animated poorly and it doesnt' use angularjs
i search a solution similar to Example 2
http://dimsemenov.com/plugins/touchcarousel/#carousel-gallery
but i need to implement it using angularjs
Have you any suggestions?
I've created a simple demo to describe my question, [link here][1]
I use angular ng-repeat to create radio, with the same ng-model, different values, the bootstrap tab works well, but the radio not display well, the point of the radio missing when i click other tab, could anyone help me ?
Thanks for Marcus's solution, problem has been solved, but I'm looking for if there has a better idea?
Maybe try to add more Angular to the mix:
http://plnkr.co/edit/gV88Lrh7Xc6xqkF9SxCM?p=preview
<input type="radio" role="tab" ng-model="ajaxSettings.method" value='GET'/>GET
(...)
<div class="tab-pane" ng-class="{'active': ajaxSettings.method == 'GET'}" id="GET"></div>