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版本的过程中遇到了需要使用图表 ...
随机推荐
- 「NOI2016」循环之美(小性质+min_25筛)
传送门. 题解 感觉这题最难的是第一个结论. x/y首先要互质,然后如果在10进制是纯循环小数,不难想到y不是2.5的倍数就好了. 因为十进制下除以2和5是除得尽的. 必然会多出来的什么东西. 如果是 ...
- Sophus安装时Eigen库更新版本的问题
原文链接:https://blog.csdn.net/m0_38055352/article/details/102900516
- HBase与Sqoop集成案例
HBase与Sqoop集成 案例:将RDBMS中的数据抽取到HBase中 Step1.配置sqoop-env.sh如下: Step2.在Mysql中创建一张数据库library,一张表book CRE ...
- WdatePicker.js的使用方法 帮助文档 (日历控件)
WdatePicker配置和功能 一.配置 日期范围限制 静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致 你可以给通过配置minDate(最小日期),maxD ...
- 一个类似indexOf()的功能的函数
之前面试的时候遇到了这样的一道题,不过写的时候有些细节没注意到,现在重新写了一下. 写一个类似indexOf()的功能的函数 var str = "dafdfgvdahjfbhyuyvtur ...
- php中正则表达式总结(不容错过)
php中正则表达式总结(不容错过) 一.总结 一句话总结: 无论js,php,java,python里面中的正则都是差不多一样的,所以用点脑子 用到正则的地方很多,比如 nginx的配置文件 1.ph ...
- (1)sqlserver2017安装
本体 https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 图形管理工具ssm 文档 https://docs.microso ...
- tomcat 相关异常
端口没有被占用却提示Several ports (8005, 8080, 8009) required by Tomcat??? 解决办法:1.运行cmd进入命令行界面:2.运行命令: netsh w ...
- Elasticsearch介绍和安装与使用
转载:https://blog.csdn.net/weixin_42633131/article/details/82902812 1.Elasticsearch介绍和安装 1.1.简介1.1.1.E ...
- 1、Locust压力测试环境搭建
环境准备:阿里云服务器一台.python2.7.pip Locust 介绍 Locust 是一个开源负载测试工具.使用 Python 代码定义用户行为,也可以仿真百万个用户. Locust 简单易用, ...
