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. Delphi 类(TObject、TPersistent、TComponent、TControl、TWinControl、TCustomControl、TGraphicControl、TInterfacedObject)简单介绍

      TObject:    VCL中所有类的根类,即是说:VCL中所有的类/组件/控件都是从TObject中继承而来.TObject类中定义了基本的 构造方法和析构方法.   TPersistent: ...

  2. luoguP1288 取数游戏II [博弈论]

    题目描述 有一个取数的游戏.初始时,给出一个环,环上的每条边上都有一个非负整数.这些整数中至少有一个0.然后,将一枚硬币放在环上的一个节点上.两个玩家就是以这个放硬币的节点为起点开始这个游戏,两人轮流 ...

  3. luoguP1290 欧几里德的游戏 [博弈论]

    题目描述 欧几里德的两个后代Stan和Ollie正在玩一种数字游戏,这个游戏是他们的祖先欧几里德发明的.给定两个正整数M和N,从Stan开始,从其中较大的一个数,减去较小的数的正整数倍,当然,得到的数 ...

  4. Linux shell脚本编程if语句的使用方法(条件判断)

    if 语句格式if  条件then Commandelse Commandfi        别忘了这个结尾If语句忘了结尾fitest.sh: line 14: syntax error: unex ...

  5. 百度API获取位置范围内的周边服务

    百度地图API是一套为开发者免费提供的基于百度地图的应用程序接口,包括JavaScript.iOS.Andriod.静态地图.Web服务等多种版本,提供基本地图.位置搜索.周边搜索.... <s ...

  6. Linux 线程Demo

    #include <stdio.h> #include <pthread.h> struct char_print_params { char character; int c ...

  7. mybatis 丢失字段

    实体上,如果没写get,记得加上 @Data

  8. 洛谷 P3803 【模板】多项式乘法(FFT)

    题目链接:P3803 [模板]多项式乘法(FFT) 题意 给定一个 \(n\) 次多项式 \(F(x)\) 和一个 \(m\) 次多项式 \(G(x)\),求 \(F(x)\) 和 \(G(x)\) ...

  9. 前端通过url页面传值

    例子:从A页面将‘myId’传到B页面 1.A页面传值 var url = encodeURI("html/editPostcard.html?myId="+ myId); win ...

  10. Gerrit(0): Install and Config

    Install(Ubuntu 17.04): apt-get install default-jre daemon [nginx] #Other OS: install openjdk8-jre [n ...