Headers/Footers（页眉页脚）

ion-header-bar

在内容顶部添加一个固定header栏。
如果应用'bar-subheader'类，就可以成为一个subheader（在下面）。 查看header CSS文档。
用法

<ion-header-bar align-title="left" class="bar-positive"> 
  <div class="buttons"> 
    <button class="button" ng-click="doSomething()">左侧按钮</button> 
  </div> 
  <h1 class="title">Title!</h1> 
  <div class="buttons"> 
    <button class="button">右侧按钮</button> 
  </div>
</ion-header-bar>

<ion-content> 一些内容!</ion-content>

API

ion-footer-bar

在内容底部添加一个固定的footer栏。
如果应用'bar-subfooter'类，就成了一个subfooter（在上面）。查看footer CSS 文档。
用法

<ion-content> 一些内容!</ion-content>

<ion-footer-bar align-title="left" class="bar-assertive"> 
  <div class="buttons"> 
    <button class="button">左侧按钮</button> 
  </div> 
  <h1 class="title">Title!</h1> 
  <div class="buttons" ng-click="doSomething()"> 
    <button class="button">右侧按钮</button> 
  </div>
</ion-footer-bar>

API

Content（内容）

ion-content

授权: $ionicScrollDelegate

ionContent指令提供一个易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。

在大多数情况下，我们建议使用Ionic的定制滚动功能，有时（出于性能原因）仅用浏览器原生的溢出滚动就足够了，因此我可以轻松地在设置了Ionic滚动和溢出滚动间切换。
你可以用ionRefresher
指令实现拉动刷新，并可以用ionInfiniteScroll
指令实现无限滚动。

用法

<ion-content
  [delegate-handle=""] 
  [padding=""] 
  [scroll=""] 
  [overflow-scroll=""] 
  [has-bouncing=""] 
  [on-scroll=""] 
  [on-scroll-complete=""]> 
... 
</ion-content>

API

ion-refresher

隶属于ionContent 或 ionScroll

允许你添加下拉刷新滚动视图。
把它作为ionContent 或 ionScroll
元素的第一个子元素。
当刷新完成时，从你的控制器中广播（$broadcast）出'scroll.refreshComplete'事件。

用法

<ion-content ng-controller="MyController"> 
  <ion-refresher pulling-text="下拉刷新..." on-refresh="doRefresh()"> </ion-refresher> 
  <ion-list> 
    <ion-item ng-repeat="item in items"></ion-item> 
  </ion-list>
</ion-content>

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) { 
  $scope.items = [1,2,3]; 
  $scope.doRefresh = function() { 
    $http.get('/new-items') 
      .success(function(newItems) { 
        $scope.items = newItems; 
      }) 
      .finally(function() { 
        // 停止广播ion-refresher 
        $scope.$broadcast('scroll.refreshComplete'); 
      }); 
  };
});

API

ion-pane

一个简单的适应内容的容器，无不良影响。在一个元素上添加 'pane'。

用法

<ion-pane>
...
</ion-pane>