表單介面製作: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的內容。
沒有留言:
張貼留言