ylbtech-ionic-CSS:ionic Toggle(切换开关)
1.返回顶部
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、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

ionic-CSS:ionic Toggle(切换开关)的更多相关文章

  1. Ionic Css样式详解

    Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...

  2. ionic:ionic 教程

    ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framew ...

  3. Ionic -- css

    Header 固定在头部,可以包含标题标签,可以有左右按钮 样式:bar bar-header bar-light 第一个小节 第二个表示的是头部 第三个表示颜色 子头部,需要在ion-content ...

  4. Ionic Js六:切换开关操作

    以下实例中,通过切换不同开关 checked 显示不同的值,true 为打开,false 为关闭. HTML 代码 <ion-header-bar class="bar-positiv ...

  5. [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 ...

  6. [转]Cordova + Ionic in Visual Studio - 101 Tutorial [Part I]

    本文转自:http://binarylies.ghost.io/cordova-ionic-in-visual-studio/ Hi everyone, I thought about lending ...

  7. ionic之$ionicGesture手势(大坑)

    鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称 ...

  8. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  9. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

随机推荐

  1. C#中的类型相等与恒等(Equality & Identity)

    l  Equality:如果两个对象是相同的类型,并且它们各自带有相同和等值的属性.(They are instances of the same type and if each of the fi ...

  2. input select 值得绑定与获取

    <div style="margin-top:100px"> <!--Input 值得绑定--> <div id="app20"& ...

  3. 概率——17icpc西安

    不知道为什么是这样子的.. #include<bits/stdc++.h> using namespace std; int m,n; int main(){ while(scanf(&q ...

  4. 对称性——cf405d

    以后碰到这种题就应该往对称性想:设x的对称数x‘是1e6-x+1 对于任意一组对称数x+x'-2=1e6-1,2e6-(x+x')=1e6-1,即X集合Y集合同时加上任意一组对称数都是可以的 枚举每个 ...

  5. RestHighLevelClient客户端相关CURD操作

    客户端连接 public void start() { try { restHighLevelClient = new RestHighLevelClient( RestClient.builder( ...

  6. NX二次开发-基于NX开发向导模板的NX对Excel读写操作(OLE方式(COM组件))

    在看这个博客前,请读者先去完整看完:NX二次开发-基于MFC界面的NX对Excel读写操作(OLE方式(COM组件))https://ufun-nxopen.blog.csdn.net/article ...

  7. mac 堡垒机传文件

    安装zssh brew install zssh 上传文件 zssh登陆上跳板机 在跳板机上ssh到相应服务器 在服务器上cd至相应要放上传文件的目录 rz -bye //在远程服务器的相应目录上运行 ...

  8. 大道浮屠诀---NBU7.7.3_oracle11G单机-单机(异机恢复WINDOWS2008平台)

    现有环境说明: 一台WINDOWS2008R2:安装有NBU7.7.3,作为服务端 一台WINDOWS2008R2:安装有oracle11.2.0.3,作为数据库服务器 现假设数据库意外崩溃,需要进行 ...

  9. 2019ICPC南京网络赛A The beautiful values of the palace

    题意:蛇形填数超大版本,需要求出一些给定坐标的值的数位和,然后q次询问,一个矩形区域内值的和是多少 解题思路:二维偏序前缀和的经典题 二维偏序:求(x,y)左下角点的个数,思路是对x,y升序排序,用树 ...

  10. 教你如何有效防止DDos攻击?

    DDos又称分布式拒绝服务,DDos是利用大量合理的请求造成资源过载,导致服务不可用.就比如一个餐馆总共有100个座位,突然有一天某个商家恶意竞争,雇佣了200个人来到这个餐馆坐着不吃不喝,门口还排着 ...