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. ArrayList,LinkedList,Vector集合的认识

    最近在温习Java集合部分,花了三天时间读完了ArrayList与LinkedList以及Vector部分的源码.之前都是停留在简单使用ArrayList的API,读完源码看完不少文章后总算是对原理方 ...

  2. NX二次开发-BlockUI对话框嵌套MFC对话框制作进度条

    半年前在一些QQ群看到有大神NX二次开发做出了进度条,那个时候我还不会弄,也不知道怎么弄得,后来断断续续得研究了一下,直到今天我把它做出来了.内心还是很喜悦的!回想自己这两年当初从没公司肯给我做NX二 ...

  3. Codeforces ~ 1009C ~ Annoying Present (贪心)

    题意 一个长度为n的数组(初始全为0),进行m次操作. 操作:给你x,d,你任意挑选一个 i (1~n),每个数字加上 x+|i-j|*d( j 表示对应数字的下标) 问m次操作后的最大算术平均值为多 ...

  4. ElasticSearch Roaring bitmap 和跳表联合查询

    ElasticSearch Roaring map 先把所有数按65535划分, 划分方法就是求商和余数,商代表数字最终在哪一块,余数代表最终在块内的数字 比如 1, 65536, 65537, 13 ...

  5. python eval()内置函数

    python有一个内置函数eval(),可以将字符串进行运行. 通过help(eval)查看帮助文档 Help on built-in function eval in module builtins ...

  6. 配置ssh连接会话复用免密码登录

    我们经常使用ssh连接远程主机,为了方便,避免每次登录输入密码,通常使用密钥登录.如果没有设置密钥, 则需要使用密码登录了,若每次都输入密码则十分繁琐.我们可以设置ssh连接会话复用,则登录成功后,会 ...

  7. VS2010 下C++使用UTF8编码

    http://www.nubaria.com/en/blog/?p=289 #pragma execution_character_set("utf-8")

  8. 分析由Python编写的大型项目(Volatility和Cuckoo)

    之前使用python都是用来做一些简单的脚本,本质上和bat批处理文件没有区别. 但是Python是可以用来编写大型的项目的,比如: Volatility:https://code.google.co ...

  9. 2019牛客多校第四场C-sequence(单调栈+线段树)

    sequence 题目传送门 解题思路 用单调栈求出每个a[i]作为最小值的最大范围.对于每个a[i],我们都要乘以一个以a[i]为区间内最小值的对应的b的区间和s,如果a[i] > 0,则s要 ...

  10. nginx新增简单下载站点

    配置nginx server { autoindex on;# 显示目录 autoindex_exact_size on;# 显示文件大小 autoindex_localtime on;# 显示文件时 ...