表單介面製作：Buttons
button基本製作方式是指定基本的class屬性值button，再指定特定的外觀class值，如下：
<button class="button button-positive">button-positive</button> <button class="button button-block">button-block </button> <button class="button button-clear">button-clear</button> <button class="button button-positive button-outline">button-outline</button> <button class="button icon-left ion-home">icon button</button>下圖為上述各種設定結果。
 |
| 圖1. 按鈕各種css設定。 |
值得注意的是，class="button..."，button必需要加入，才會有較一致的格式。此外icon button是apps常用的按鈕格式
<button class="button icon-left ion-home">icon button</button>特殊的 class設定值包括：
- icon-left：icon置於文字的左邊。icon-right則置於右邊
- ion-home：icon名稱。Ionic提供許多內建icon名稱，這些名稱可在ionicons網站(http://ionicons.com/) 查詢。
按鈕範例：內容收合
按鈕搭配ng-show指令，可快速製作內容收合的功能。
JS Bin index.html程式碼如下： <body ng-app="starter" ng-controller="controller">
<ion-header-bar class="bar bar-positive">
<h1 class="title">按鈕範例</h1>
</ion-header-bar>
<ion-content>
<button ng-click="toggle()">{{buttonText}}</button>
<div class="list card">
<div class="item" ng-show="flag">內容在此</p>
</div>
</div>
</ion-content>
</body>
- 第1行：ng-controller設定頁面處理模組為"contoller"，該模組定義於app.js。
- 第6行：<button>使用ng-click指令指定callback函式toggle()，toggle()負責修正兩個資料模型變數的內容 (1) 根據收合狀態，決定按鈕文字buttonText的內容 (2) 切換收合狀態變數
- 第8-9行：為收合的內容區塊，該區塊使用ng-show指令，當ng-show為true，內容便會顯示，反之則隱藏起來。flag便是在controller中定義用於控制顯示或隱藏內容的資料模型變數。
app.js程式碼如下：
var app = angular.module('starter',['ionic']);
app.controller('controller',function($scope){
$scope.flag=true;
$scope.buttonText =($scope.flag)?"收起":"展開";
$scope.toggle = function(){
$scope.flag = !$scope.flag;
$scope.buttonText = ($scope.flag)?"收起":"展開";
};
});
- 第3-4行：定義資料模型變數flag, buttonText。
- 第5-8行：toggle()為click事件處理函式。切換flag的true/false狀態，進而影響頁面內容的收合，以及buttonText的內容。
沒有留言:
張貼留言