ionic 表单输入 ion-checkbox ion-radio ion-toggle ion-spinner

2023-05-28,,

学习要点:
1.复选按钮 : ion-checkbox
2.单选按钮 : ion-radio
3.开关按钮 : ion-toggle
4.等待指示器 : ion-spinner

1.复选按钮 : ion-checkbox
ionic 的复选按钮脱胎于 HTML 标准的 checkbox 元素,可以在一组选项中 同时选中多个:

使用 ion-checkbox 指令声明复选按钮元素:
<ion-checkbox>...</ion-checkbox>
与标准的 checkbox 相比,使用 ionic ion-checkbox 有几个优势:

1.样式更美观,与移动端的 UI 更匹配
2.支持数据绑定。使用可选的 ng-model 属性,可以直接将选中状态绑定到作用域上的
变量

3.直接使用文本子元素作为标签

2.单选按钮 : ion-radio
和复选按钮类似, ionic 的单选按钮脱胎于 HTML 标准的 radio 元素,用来在一组互斥的 选
项中进行选择:

使用 ion-radio 声明单选按钮元素:
<ion-radio>...</ion-radio>
HTML radio 相比, ion-radio 的改进也是明显的:
1. 与移动端的 UI 更匹配
2. 使用可选的 ng-model 属性,实现与作用域变量的数据绑定
3. 使用可选的 ng-value 属性,可以使用作用域变量设置单选按钮对应的值

3. 开关按钮 : ion-toggle
开关和复选按钮的作用一致,都是从一组选项中进行多重选择。
ionic 中,使用 ion-toggle 指令声明开关元素:

<ion-toggle></ion-toggle>
ion-toggle 有两个可选的属性:
ng-model - 模型变量
和复选按钮一样,开关按钮也可以使用可选的 ng-model 属性实现与作用域变量 的双向绑定。

toggle-class - 样式类
可以使用可选的 toggle-class 属性为开关按钮声明额外的样式。比如: toggle-{color} 用来声
明配色方案。

4.等待指示器 : ion-spinner
App 在进行耗时地处理时,给用户一个明显的提示反馈,可以营造良好的体验。
ionic spinner 使用 SVG JavaScript 实现,因此可以缩放、添加样式并具有动画效果。

使用 ion-spinner 指令声明 spinner 对象:
<ion-spinner></ion-spinner>
ion-spinner icon 属性是可选的,用来指定 SVG 图标名称。请注意,这里的名称不是 ionioncs
的图标名称。当前支持的 SVG 图标名称请参见示例代码。
ionic 的预置样式类: spinner-{color}可以用来声明配色方案,也可以 自定义样式,比如设置
大小等:
.spinner svg{
width: 28px;
height: 28px;
stroke: #444;
fill: #444;
}

交流QQ群:187269144 

QQ群2:438443293

QQ群3:248403526




《ionic 表单输入 ion-checkbox ion-radio ion-toggle ion-spinner.doc》

下载本文的Word格式文档,以方便收藏与打印。