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版本的过程中遇到了需要使用图表 ...
随机推荐
- 使用HBuilder编辑器进行真机调试运行时提示Waiting for debugger!
在使用HBuilder编辑器创建mui项目进行真机调试的时候,手机总是提示Waiting for debugger! 现在终于找到了解决办法: 手机 设置 -> 开发人员选项 -> USB ...
- (转)微信,QQ这类IM app怎么做——谈谈Websocket
转:http://www.cocoachina.com/ios/20160527/16482.html 前言 关于我和WebSocket的缘:我从大二在计算机网络课上听老师讲过之后,第一次使用就到了毕 ...
- CSS:CSS 盒子模型
ylbtech-CSS:CSS 盒子模型 1.返回顶部 1. CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model&quo ...
- [资料]C#操作SQL Server数据库
1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调 ...
- R语言中样本平衡的几种方法
R语言中样本平衡的几种方法 在对不平衡的分类数据集进行建模时,机器学习算法可能并不稳定,其预测结果甚至可能是有偏的,而预测精度此时也变得带有误导性.在不平衡的数据中,任一算法都没法从样本量少的类中获取 ...
- 3.5 compose redux sages
基于 redux-thunk 的实现特性,可以做到基于 promise 和递归的组合编排,而 redux-saga 提供了更容易的更高级的组合编排方式(当然这一切要归功于 Generator 特性), ...
- 数据整理A
- 巧用border属性
border是常见的css2属性,大家的印象中是不是只是作为边框使用,如下所示: 事实上border,还可以当做图标去使用 我们先来看段代码 <style> .div1{ margin: ...
- 38-Ubuntu-用户管理-03-usermod指定用户登录shell
简记: 所谓shell就是可以输入终端命令的窗口,shell是一个软件. 1.Ubuntu终端shell介绍 summmer@summmer-virtual-machine:~/桌面$ summmer ...
- docker容器和宿主机时间不一致的问题
第1种:复制宿主机的localtime文件,到容器里docker cp /etc/localtime threg:/etc/ 注:这里 threg为容器名称,复制完后需重启容器 第2种在构建docke ...
