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

本文深入探讨了Ionic框架中的复选按钮、单选按钮、开关按钮和等待指示器组件的功能与用法,包括样式定制、数据绑定及事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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


 

   






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值