ionic-presentation

Lists

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  <a class="item" href="#">
    Kit Kat
  </a>

  ...

</div>

Complex Lists

• AngularJS Directive
• Buttons exposed by swiping
• Reorder
• Delete

<ion-list>

  <ion-item ng-repeat="item in items" item="item">
    List Item {{ item.id }}
  </ion-item>

</ion-list>

Collection Repeat

• Similar to Angular's ng-repeat
• Inspired by iOS’s UICollectionView
• Scroll through thousands of items
• Only renders the viewable items
• Smooth jank-free scrolling

<div class="list">
  <div collection-repeat="c in contacts">
    <h2>{{ c.name }}</h2>
    <p>{{ c.email }}</p>
  </div>
</div>

Navigation

• Uses AngularUI Router
• Shows back button when possible
• Transitions follow direction of nav
• Works with Android's back button

<ion-nav-bar>
  <ion-nav-back-button>
    Back
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

Tabs

• Nested views
• Each tab has its own nav history
• Abstract states in AngularUI Router

<ion-tabs>

  <ion-tab title="Home" icon="ion-home">
    <ion-nav-view name="home"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-information">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios7-world">
    <ion-nav-view name="contact"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Side Menu

<ion-side-menus>

  <ion-side-menu-content>

    <ion-nav-view name="menuContent"></ion-nav-view>

  </ion-side-menu-content>

  <ion-side-menu side="left">

    <ion-header-bar class="bar-assertive">
      <h1 class="title">Left Menu</h1>
    </ion-header-bar>

    <ion-content>
      ...
    </ion-content>

  </ion-side-menu>

</ion-side-menus>

Slide Box

<ion-slide-box on-slide-changed="change(index)">
  <ion-slide>
    Slide 1
  </ion-slide>
  <ion-slide>
    Slide 2
  </ion-slide>
  <ion-slide>
    Slide 3
  </ion-slide>
</ion-slide-box>

Action Sheet

• AngularJS Service
• Inject into controllers

$ionicActionSheet.show({
  titleText: 'Action Sheet Example',
  buttons: [
    { text: 'Share' },
    { text: 'Move' },
  ],
  destructiveText: 'Delete',
  cancelText: 'Cancel',
  buttonClicked: function(index) {
    console.log('BUTTON CLICKED', index);
    return true;
  }
});

Popover

• AngularJS Service
• Inline or external template

$ionicPopover.fromTemplateUrl('popover.html',
  function(popover) {
    $scope.popover = popover;
  }
);

<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">My Popover Title</h1>
  </ion-header-bar>
  <ion-content class="padding">
    Hello!
  </ion-content>
</ion-popover-view>

Modal

• AngularJS Service
• Inline or external template

$ionicModal.fromTemplateUrl('modal.html', {
  scope: $scope
}).then(function(modal) {
  $scope.modal = modal;
});

Pull to Refresh

<ion-refresher on-refresh="doRefresh()" pulling-text="Pull to refresh..." refreshing-text="Refreshing!" refreshing-icon="ion-loading-c">
</ion-refresher>