jayeshcp
4/30/2016 - 4:35 PM

Ionic Templates

Ionic Templates

Template002.md
content_copyfile_download
  • Rendered
  • Source

Basic floating button

Screenshot:

Code:

HTML:

<div class="float-button">
    <span class="height-fix">
      <a href="#" ng-click="showAlert()" class="content">
        <i class="ion-plus-circled"> </i>
      </a>
    </span>
</div>

CSS:

.float-button {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 30px;
    padding: 30px;
    font-size: 40px;
    background: $positive;
    position: fixed;
    bottom: 20px; /* Adjust to where you want it */
    right: 20px; /* Adjust to where you want it */
    z-index: 9999;
}

.float-button .height_fix {
    margin-top: 100%;
}

.float-button .content {
    position: absolute;
    left: 0;
    top: 50%;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: -20px; /* Note, this must be half the font size */
    color: $default;
}
Template001.md
content_copyfile_download
  • Rendered
  • Source

Basic list template with button at the bottom

Screenshot:

Code:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app" ng-controller="HomeController">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      
      <ion-content class="padding">
        
        <div class="list list-inset">
          <label class="item item-input">
            <i class="icon ion-search placeholder-icon"></i>
            <input type="text" placeholder="Search"
                ng-model="query">
          </label>
        </div>
        
            <div class="list">
                <a ng-repeat="task in tasks | filter: query"
                    href="#/app/task_detail/{{ task.id }}"
                    style="text-decoration: none;">
                    <div class="item item-divider item-text-wrap">
                        {{ task.title }}
                    </div>
    
                    <div class="item item-text-wrap" style="margin-bottom: 10px !important;">
                        {{ task.detail }}
                    </div>
                </a>
            </div>
      </ion-content>
      
      <div class="tabs tabs-dark" style="height:auto;">
        <div class="row">
            <button ng-click="newtask()" 
              class="button button-positive button-block">New
            </button>
        </div>
      </div>
      
    </ion-pane>
  </body>
</html>

Javascript :

angular.module('app', ['ionic'])
.controller('HomeController', function($scope) {
  $scope.tasks = [
    {id:1, title:'Python Homework 01', detail: 'Expression parser and calculator', type: 'Assignment'},
    {id:2, title:'Java Homework 01', detail: 'Threads Synchronization', type: 'Assignment'}
  ];
})