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

学习要点:
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

时间: 2024-10-10 09:35:17

ionic 表单输入 ion-checkbox ion-radio ion-toggle ion-spinner的相关文章

自定义表单样式之checkbox和radio

1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添加背景图片(美化的checkbox或radio),也就是

VUE:事件处理和表单输入绑定

事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_事件处理</title> </head> <body> <!-- 1.绑定监听: v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参:event 隐

Vue.js 实战教程 V2.x(12)表单输入绑定

12表单输入绑定 12.1基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 文本 <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> 多行文本 <spa

Vue基础篇--7表单输入绑定input

Vue基础篇--7表单输入绑定input 1.基础语法 你可以用 v-model 指令在表单 . 及 `元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但v-model` 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. 注意: v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data

使用文档对象在页面上创建学生信息表。 信息表包括学号、姓名、性别、电子邮件、联系电话、个人主页和联系地址, 信息表内容通过表单输入,提交前先使用正则表达式进行验证,联系地址不能超过20个字符, 每输入一名学生的信息,提交后,表格增加一行,表格不能被选择、复制。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        描述:使用文档对象在页面上创建学生信息表.        信息表包括学号.姓名.性别.电子邮件.联系电话.个人主页和联系地址,        信息表内容通过表单输入,提交前先使用

Xceed WPF表单输入控件Xceed Editors for WPF 免费下载及介绍

Xceed Editors for WPF 是一款包含12种功能强大的WPF编辑控件,用户输入控件,每个控件都具有多种风格主题,包含:日期选择控件.复选框.改进的TextBox.数字输入框.值范围输入框等. 具体功能: DatePicker/Calendar:日期选择控件 MaskedTextBox:为输入文本指定一种标记格式 CheckBox:提供了多种风格的复选框,不像传统的WPF复选框 AutoSelectTextBox:当控件具有焦点时内容被选择 ValueRangeTextBox:添加

jquary 表单输入内容 表格接收 分页符

表格的悬浮换色  点击换色  隔行换色 $("tr:even").addClass("gaoliang"); $("tr").mouseover(function(){ $(this).addClass("xf");    }).mouseout(function(){     $(this).removeClass("xf");    }).click(function(){     $(this).ad

纯CSS3实现的表单输入高亮效果

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS3实现的联系人表单输入效果</title><!-- Import Google Font - Yanone Kaffeesatz --> <link href='http://fonts.g

jQuery表单输入文字统计字数插件

这是一款非常实用的jQuery表单输入文字计数插件.该插件可以设置某个输入框或textarea可输入的最大文字数,当用户输入文字的时候,插件会将字数倒计数显示,提示用户还可以输入多少个文字,并且显示的数字随着数字的减少会越来越清晰. 效果演示:http://www.htmleaf.com/Demo/201503281587.html 下载地址:http://www.htmleaf.com/jQuery/Form/201503281586.html