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

属性	类型	详情
align-title(可选)	字符串	标题对齐的位置。可用: 'left', 'right', or 'center'。默认为 'center'。

---

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

属性	类型	详情
align-title(可选)	字符串	标题对齐的位置。可用: 'left', 'right', or 'center'。默认为 'center'。

---

---

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

属性	类型	详情
delegate-handle(可选)	字符串	该句柄用于标识带有$ionicScrollDelegate的滚动视图。
padding(可选)	布尔值	是否在内容上添加内填充。在iOS上默认为true，在Android上为false。
scroll(可选)	布尔值	是否允许内容滚动。默认为true。
overflow-scroll(可选)	布尔值	是否用溢出滚动代替Ionic滚动。
has-bouncing(可选)	布尔值	是否允许内容滚动反弹到边缘。iOS上默认为true，Android上默认为false。
on-scroll(可选)	表达式	当内容滚动时表现的评估。
on-scroll-complete(可选)	表达式	一个滚动动作完成时表现的评估。

---

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

属性	类型	详情
on-refresh(可选)	表达式	当用户下拉到一定程度然后开始刷新时触发。
on-pulling(可选)	表达式	当用户开始下来刷新时触发。
pulling-icon(可选)	字符串	当用户下拉时显示的图标。默认: 'ion-arrow-down-c'。
pulling-text(可选)	字符串	当用户下拉时显示的文字。
refreshing-icon(可选)	字符串	用户刷新后显示的图标。
refreshing-text(可选)	字符串	用户刷新后显示的文字。

---

ion-pane

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

用法

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