I'm trying to add a transition where a user clicks on a button and the next page slides in from the right side.
Is that easy to do with the Ionic Framework?
I can't seem to find how to do that.
Here is what I have on my view:
<ion-view title="Payment" cache-view="false">
<ion-content padding="false" class="has-header">
<div class="container">
<div class="spacer" style="width: 290px; height: 31px;"></div>
<div class="show-list-numbers-and-dots">
<p style="color:#000000;">Payment Methods</p>
</div>
</div>
<ion-list>
<ion-item class="item-icon-left item-icon-right">
<i class="icon ion-card"></i>.... 2039
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="calm" ui-sref="paymentPage">Add Payment Method</ion-item>
</ion-list>
<div class="spacer" style="width: 290px; height: 44px;"></div>
</ion-content>
</ion-view>
check this from official docs
slides component
First disable swipe and then on button click you can call this function for transition
slideTo(index, speed, runCallbacks)
Related
When I try to dynamically add content in MODAL(overflow-scroll is set false), the page adds white space at the bottom of page and prevents me to scroll up to reach the top of "ion-content".
Can anyone help me?
My code:
<ion-modal-view>
<ion-header-bar>
....
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="fc in query.filterChoices">
...
</ion-item>
</ion-list>
<div class="row">
<div class="col col-20">
</div>
<div class="col col-60">
<button class="button button-stable button-block" ng-click="addFilterChoice();">
Add Filter
</button>
</div>
<div class="col col-40">
</div>
</div>
</ion-content>
I need a scrollable page with ion-slides directive. If i set scroll=true in ion-content the slider is not shown on the page. I'm running ionic 1.3.1 and using the new ion-slide directive. This is my code,
<ion-content class="padding" scroll="false">
<div class="list card">
<div class="item no-padding">
<img class="full-image" src="http://12.jpg">
</div>
<div class="item ">
<button class="button icon-left ion-android-navigate button-stable">Directions </button>
<button class="button icon-left ion-ios-telephone button-stable">Call </button>
<button class="button icon-left ion-android-share-alt button-stable">Share</button>
</div>
</div>
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/0000">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
</ion-slides>
</div>
<h4>About </h4>
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</ion-content>
what am i doing wrong, How do i get the ion-slides to work in a scrollable page?
Thanks for any help
How about wrapping the inside of your ion-slide-page with an ion-content like:
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<ion-content has-header="true" padding="true">
<img src="http://placehold.it/375x468/">
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
I would like to note that this should work with Android. I think I had to remove the ion-content for iOS to work on the device.
*Edit - Also, my outside ion-content is set to true
I have tried several code samples to get a back button in my home page. I couldnt see the nav back button. Where i am wrong?
<ion-side-menus enable-menu-with-back-views="true">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="dark-bg expanded">
<span>R</span>
<p align="center"> My App</p>
</ion-header-bar>
<ion-content class="stable-bg has-expanded-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.settings">
Settings
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.profile">
Profile
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.logout">
Log out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home page code
<ion-view title="Home">
<ion-content>
<div class="list card">
<a class="item item-icon-left assertive" ui-sref="makerequest">
<i class="icon ion-ios-list-outline"></i>
Make New Request
</a>
<a class="item item-icon-left assertive" ui-sref="viewrequest">
<i class="icon ion-ios-copy"></i>
View Request
</a>
</div>
</ion-content>
</ion-view>
Added my home page code above.
Regards,
Sabarisri
I've a simple application with a side menu where you can navigate to different views. If I click on an item I get redirected to that view but the back button doesn't show up, which seems to be the default behaviour.
Is there a build in way to show the back button on side menu navigation?
I've found this codepen on the ionic forum which uses the same basic structure as I do: http://codepen.io/mhartington/pen/azwojR
This is my complete menu:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content id="header-wrapper">
<div id="logoHeader" class="bar bar-header">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
<img src="img/rg-gunz-christmas.png" />
</div>
<ion-nav-bar id="header" class="bar bar-header">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu id="menu" side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<div class="account">
<img ng-src="{{account.AvatarUrl}}" class="avatar"/>
<div class="username">{{account.UserID}}</div>
</div>
<ion-list>
<ion-item menu-close href="#/app/main">
<i class="icon ion-home"></i> <span class="padding-left">Home</span>
</ion-item>
<ion-item menu-close href="#/app/login" ng-show="!account">
<i class="icon ion-log-in"></i> <span class="padding-left">Login</span>
</ion-item>
<ion-item menu-close href="#/app/register" ng-show="!account">
<i class="icon ion-person"></i> <span class="padding-left">Register</span>
</ion-item>
<ion-item menu-close href="#/app/individualRanking">
<i class="icon ion-arrow-graph-up-right"></i> <span class="padding-left">Individual ranking</span>
</ion-item>
<ion-item menu-close href="#/app/clanRanking">
<i class="icon ion-ios-bolt"></i> <span class="padding-left">Clan ranking</span>
</ion-item>
<ion-item menu-close href="#/app/statistics">
<i class="icon ion-stats-bars"></i> <span class="padding-left">Statistics</span>
</ion-item>
<div class="item item-divider" ng-show="account">
Account
</div>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-settings"></i> <span class="padding-left">Settings</span>
</ion-item>
<ion-item menu-close href="#/app/playlists" ng-show="account">
<i class="icon ion-log-out"></i> <span class="padding-left">Log out</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
its hard to predict here.just check may be some other view is override in the view which is opening.
i had same problem.may be this could help you.
place ion-nav-bar in particular view, where u want to show back button!
<ion-view view-title="Order Details">
<ion-nav-bar class=" dark">
<ion-nav-back-button class="button-clear button-dark stable ">
<i class="ion-arrow-left-c stable"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="content-stable"></ion-content>
</ion-view>
Try this code: You can add this class ion-ios-arrow-back or ion-ios7-arrow-back
<ion-side-menu-content >
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="link" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
I have the following code:
personal-info.html
<ion-view view-title="Personal Information" can-swipe-back="true">
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-ios-arrow-left" ng-click="doTheBack()" nav-direction="back"></button>
</ion-nav-buttons>
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
</ion-content>
</ion-view>
and my controller
.controller('PersonalInfoCtrl', function($scope) {
$scope.doTheBack = function() {
window.history.back();
};
});
I want to enable the swipe back feature I tried by putting can-swipe-back="true" inside <ion-view> tag but it didn't help at all. Also I have checked a lot of documentation as well as this question How do you "Swipe to go back" in Ionic? but it seems that swipe back feature is not enabled for my application.
The way I implemented it was through $ionicNavBarDelegate.
In HTML:
<ion-view view-title="Personal Information">
<ion-content on-swipe-right="swipe('right')" class="padding">
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
</ion-content>
</ion-view>
In controller:
$scope.swipe = function (direction) {
if(direction == 'right')
$ionicNavBarDelegate.back();
}
Make sure to include $ionicNavBarDelegate in your controller header.
If that doesn't work, take a look at http://forum.ionicframework.com/t/any-sample-code-on-how-to-use-swipe-to-go-back/19122/13. Swipe-to-go-back seems to work by default since RC0 as demonstrated by http://codepen.io/mhartington/pen/RNqpJp.