ionic-CSS:ionic Toggle(切换开关)
| ylbtech-ionic-CSS:ionic Toggle(切换开关) |
| 1.返回顶部 |
ionic Toggle(切换开关)
切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。
切换开关可以使用 toggle-assertive 来指定颜色。
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
该实例有是多个切换开关列表。注意,每个选项的 item 类后需要添加 item-toggle 类。
<ul class="list"> <li class="item item-toggle">
HTML5
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li> ... </ul>
运行效果如下:
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
ionic-CSS:ionic Toggle(切换开关)的更多相关文章
- Ionic Css样式详解
Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...
- ionic:ionic 教程
ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framew ...
- Ionic -- css
Header 固定在头部,可以包含标题标签,可以有左右按钮 样式:bar bar-header bar-light 第一个小节 第二个表示的是头部 第三个表示颜色 子头部,需要在ion-content ...
- Ionic Js六:切换开关操作
以下实例中,通过切换不同开关 checked 显示不同的值,true 为打开,false 为关闭. HTML 代码 <ion-header-bar class="bar-positiv ...
- [Ionic] Align and Size Text with Ionic CSS Utilities
The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when ...
- [转]Cordova + Ionic in Visual Studio - 101 Tutorial [Part I]
本文转自:http://binarylies.ghost.io/cordova-ionic-in-visual-studio/ Hi everyone, I thought about lending ...
- ionic之$ionicGesture手势(大坑)
鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称 ...
- 基于ionic+angulajs的混合开发实现地铁APP
基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
随机推荐
- jQuery的属性、遍历和HTML操作
一.属性操作 1..attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标记图 ...
- HDU 4866 Shooting 题解:主席树
这题的主要的坑点就是他给你的射击目标有重合的部分,如果你向这些重合的部分射击的话要考虑两种情况: 射击目标数量 ≥ 重合数量 : 全加上 射击目标数量 ≤ 重合数量 : 只加距离*射击目标数量 然而这 ...
- AcWing 156. 矩阵 (哈希二维转一维查询)打卡
给定一个M行N列的01矩阵(只包含数字0或1的矩阵),再执行Q次询问,每次询问给出一个A行B列的01矩阵,求该矩阵是否在原矩阵中出现过. 输入格式 第一行四个整数M,N,A,B. 接下来一个M行N列的 ...
- js 读取本地文件(必须通过input控件才能实现) 及 下载文件
js 操作 文件的实现原理: 1.js是不能直接操作(读写)文件的,html的 input[type="file"] 控件是可以读取文件数据(获取文件数据流)的.js可以获取这个 ...
- I. Five Day Couple--“今日头条杯”首届湖北省大学程序设计竞赛(网络同步赛)
题目描述:链接点此 这套题的github地址(里面包含了数据,题解,现场排名):点此 链接:https://www.nowcoder.com/acm/contest/104/H来源:牛客网 题目描述 ...
- project的操作说明
project 1 操作的步骤 设定一个起始时间:7月1号 安排好摘要(任务)的先后顺序 一个一个任务的来:A任务,下面有几个分布实现的部门: 设计部门 3个工作日 程序部门 1个工作日.然后配置相互 ...
- 导入安全证书到jdk
一:.导入证书 1.打开doc窗口,打开cmd,执行命令: keytool -import -file f:\ca.crt -keystore "%JAVA_HOME%\jre\lib\se ...
- MakeDown渲染出错
MakeDown渲染出错 makedown作为程序员不可或缺的编辑工具,平时的使用技巧也是非常多的. 今天给新电脑装了一个,发现出现了错误(win10环境下),如图: 错误的表现形式即:不能实时预览M ...
- delphi基础篇之数据类型之三:3.结构类型(Struct)
3.结构类型(Struct) 结构类型在内存中存储一组相关的数据项,而不是像简单数据类型那样单一的数值.结构数据类型包括:集合类型.数组类型.记录类型.文件类型.类类型.类引用类型和接口类型等.
- Jeecg 切换默认首页方法
类名: org.jeecgframework.core.enums.SysThemesEnum
