The expectation of modern mobile applications to have a fancy UI
with smooth animations and gesture controls. Users want to be able to
drag things.
So we can do same things in ionic framework.
Let's start fresh project for same.
Following are the commands to start the new blank project in ionic frame work-
1) ionic start IonicBankProject blank
2) cd IonicBankProject
3) ionic platform add android
The goal is to have something like, if you swipe a list item left, a series of buttons become exposed.
As per the ionic documentation, the buttons are known as ion-option-buttons. You can add as many ion-option-buttons as you’d like.
Example-
Here we are adding four button in index.html page-
So, index.html page look like-
<ion-item href="#">
Item1It is important to add the
<ion-option-button class = "button-light icon ion-heart"></ion-option-button>
<ion-option-button class = "button-light icon ion-email"></ion-option-button>
<ion-option-button class = "button-assertive icon ion-trash-a"></ion-option-button>
<ion-option-button class = "button-light icon ion-heart"></ion-option-button>
</ion-item>
can-swipe="true" flag, otherwise the list items will be static and won’t slide.So, now index.html page look like-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-list show-delete="false" can-swipe="true">
<ion-item href="#">
Item 1
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
<ion-option-button class="button-light icon ion-email"></ion-option-button>
<ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
<ion-item href="#">
Item 2
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
<ion-option-button class="button-light icon ion-email"></ion-option-button>
<ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
Really i am impressed from this post....the person who created this post is a genius and knows how to keep the readers connected..
ReplyDeleteHire Ionic Framework Developers