Ionic控件之——按鈕（Button)

Ionic提供豐富的按鈕特性，足以滿足大部分的按鈕實現需求。

一、HTML實現一個簡單按鈕：

<button class="button"> 我是按鈕 </button>

監聽按鈕的點擊事件:

通常一個按鈕被用戶點擊后，一定會觸發一個功能，例如提交表單、確認選擇、彈出提示等等，因此對按鈕點擊的監聽，以及觸發點擊后要處理的事件邏輯是在Ionic開發中最常見的開發需求。

在html中為ng-click添加一個事件：

 

<button class="button" ng-click="onClickBtn()">
  我是按鈕
</button>

JS中實現點擊事件:

在上述界面相綁定的JS文件中，實現對應的點擊邏輯，我們先實現一個點擊后彈出提示框的簡單邏輯：

$scope.onClickBtn = function(){
    alert("Hello World");
};

特別要注意的是，JS中$scope作用域下的點擊事件函數名必須和html中定義的ng-click中的函數名一致。

 

點擊事件參數：

通常界面中有多個按鈕時，可以按照上述方法，定義不同的按鈕，並綁定不同名字的事件函數，達到各自實現各自邏輯的目的。但是如果在一個大量的數據列表中，每一個單元選項都有一個按鈕時，我們不可能去定義無數個不同的事件。此時就需要通過傳遞參數來通知一個按鈕事件，並進行判斷來自哪一個按鈕。

現在Html中定義三個按鈕，並在ng-click事件中的括號里，補充不同的參數。

<button class="button" ng-click="onClickBtn(1)">
  我是按鈕
</button>

<button class="button" ng-click="onClickBtn(2)">
  我是按鈕
</button>

<button class="button" ng-click="onClickBtn(3)">
  我是按鈕
</button>

JS中實現帶參數的事件監聽：

$scope.onClickBtn = function(number){

    alert("I'm No." + number);
};

二、按鈕的樣式：

撐滿顯示：

經過運行，你可能會發現上述的按鈕大小和按鈕文字的數量有關，如果需要顯示一個撐滿橫向屏幕的按鈕，可以在class中，增加button-full這個樣式

<button class="button button-full"> 
　　我是撐滿按鈕
</button>

運行后可以發現按鈕以橫向撐滿方式顯示在屏幕上了

 

按鈕的顏色：

是時候給按鈕配上一個好看的顏色了，Ionic為基礎控件