Ionic基础——表单输入ion-checkbox ion-radio ion-toggle ion-spinner

来源：互联网发布：淘宝店铺举报链接编辑：程序博客网时间：2024/05/16 06:44

一.复选按钮 : 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

当App在进行耗时地处理时，给用户一个明显的提示反馈，可以营造良好的体验。

ionic的spinner使用SVG和JavaScript实现，因此可以缩放、添加样式并具有动画效果。

使用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>

0 0