一.复选按钮 : ion-checkbox
ionic的复选按钮脱胎于HTML标准的checkbox元素,可以在一组选项中 同时选中多个。
使用ion-checkbox指令声明复选按钮元素:
<ion-checkbox>...</ion-checkbox>
与标准的checkbox相比,使用ionic的ion-checkbox有几个优势:
1.样式更美观,与移动端的UI更匹配;
2.支持数据绑定。使用可选的ng-model属性,可以直接将选中状态绑定到作用域上的变量;
3.直接使用文本子元素作为标签。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="../../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-checkbox</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-checkbox class="checkbox-dark" ng-repeat="item in items" ng-model="item.selected">
{{item.label}} : {{item.selected}}
</ion-checkbox>
</ion-list>
</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
$scope.items = [
{label:"HTML5",selected:true},
{label:"CSS3"},
{label:"ECMAScript6"}
];
});
</script>
二.单选按钮 :ion-radio
和复选按钮类似,ionic的单选按钮脱胎于HTML标准的radio元素,用来在一组互斥的 选项中进行选择:
使用ion-radio声明单选按钮元素:
<ion-radio>...</ion-radio>
和HTML的radio相比,ion-radio的改进也是明显的:
1. 与移动端的UI更匹配;
2. 使用可选的ng-model属性,实现与作用域变量的数据绑定;
3. 使用可选的ng-value属性,可以使用作用域变量设置单选按钮对应的值。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="../../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-radio</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">Your choice : {{ret.choice}}</div>
<ion-radio radio-color="balanced" ng-repeat="item in items"
ng-model="ret.choice" ng-value="item">
{{item}}
</ion-radio>
</div>
</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
$scope.items=["HTML5","ES6","CSS3"];
$scope.ret = {choice:"CSS3"};
});
</script>
三. 开关按钮 : ion-toggle
开关和复选按钮的作用一致,都是从一组选项中进行多重选择。
在ionic中,使用ion-toggle指令声明开关元素:
<ion-toggle></ion-toggle>
ion-toggle有两个可选的属性:
- ng-model - 模型变量。和复选按钮一样,开关按钮也可以使用可选的ng-model属性实现与作用域变量的双向绑定。
- toggle-class - 样式类。可以使用可选的toggle-class属性为开关按钮声明额外的样式。比如:toggle-{color} 用来声明配色方案。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="../../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-toggle</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<div class="item item-divider">前端技术</div>
<ion-toggle toggle-class="toggle-dark" ng-repeat="item in items" ng-model="item.selected">{{item.text}} / {{item.selected}}</ion-toggle>
</ion-list>
</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
$scope.items=[
{text:"HTML5"},
{text:"ECMAScript6",selected:true},
{text:"CSS3",selected:true}
];
});
</script>
使用ion-spinner指令声明spinner对象:
<ion-spinner></ion-spinner>
ion-spinner的icon属性是可选的,用来指定SVG图标名称。请注意,这里的名称不是 ionic的图标名称。当前支持的SVG图标名称请参见示例代码。
ionic的预置样式类:spinner-{color}可以用来声明配色方案,也可以 自定义样式,比如设置大小等:
.spinner svg{
width: 28px; height: 28px; stroke: #444; fill: #444;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<script src="../../lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">ion-spinner</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items" >
<ion-spinner icon="{{item}}"></ion-spinner>
{{item}}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
<script>
angular.module("myApp",["ionic"])
.controller("myCtrl",function($scope){
$scope.items = ["android","ios","ios-small","bubbles","circles",
"crescent","dots","lines","ripples","spiral"];
});
</script>