ylbtech-ionic-CSS:ionic Range
1.返回顶部
1、

ionic Range

ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。

实例

<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div> <div class="list" style="margin-top: 13px">
<div class="item item-divider">
Ranges In A List
</div>
<div class="item range range-positive">
<i class="icon ion-ios-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="12">
<i class="icon ion-ios-sunny"></i>
</div>
<div class="item range range-calm">
<i class="icon ion-ios-lightbulb-outline"></i>
<input type="range" name="volume" min="0" max="100" value="25">
<i class="icon ion-ios-lightbulb"></i>
</div>
<div class="item range range-balanced">
<i class="icon ion-ios-bolt-outline"></i>
<input type="range" name="volume" min="0" max="100" value="38">
<i class="icon ion-ios-bolt"></i>
</div>
<div class="item range range-energized">
<i class="icon ion-ios-moon-outline"></i>
<input type="range" name="volume" min="0" max="100" value="50">
<i class="icon ion-ios-moon"></i>
</div>
<div class="item range range-assertive">
<i class="icon ion-ios-partlysunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="63">
<i class="icon ion-ios-partlysunny"></i>
</div>
<div class="item range range-royal">
<i class="icon ion-ios-rainy-outline"></i>
<input type="range" name="volume" min="0" max="100" value="75">
<i class="icon ion-ios-rainy"></i>
</div>
<div class="item range range-dark">
<i class="icon ion-ios-lightbulb-outline"></i>
<input type="range" name="volume" min="0" max="100" value="88">
<i class="icon ion-ios-lightbulb"></i>
</div>
</div>

尝试一下 »

运行效果如下:

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

ionic-CSS:ionic Range的更多相关文章

  1. Ionic Css样式详解

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

  2. Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  3. 稍复杂的ionic例子:显示一个列表,并且允许点击进入列表项

    这个例子,按照MVC的方式进行了分层,下面是代码: demo3.htm <!DOCTYPE html> <html ng-app="app"> <he ...

  4. Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构

    目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...

  5. ionic-CSS:ionic icon(图标)

    ylbtech-ionic-CSS:ionic icon(图标) 1.返回顶部 1. ionic icon(图标) ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 ...

  6. ionic:ionic 教程

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

  7. 杂项:ionic

    ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS ...

  8. 国内常用的三种框架:ionic/mui/framework7对比

    国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040

  9. ionic实战系列(一):ionic的开发环境配置和编译、发布

    我的ionic实战系列是基于<<Ionic实战>>[美]Jeremy Wilken著-这本书的读书笔记,有诸多借鉴,不详细的地方请参考书籍本身的内容. 1.1技术栈模型 Ion ...

随机推荐

  1. 阿里云物联网边缘计算加载MQTT驱动

    写在前面 本文在LinkEdge快速入门样例驱动的基础上,加载了MQTT订阅的客户端,使得边缘端容器可以通过MQTT获得外部数据. 1. 系统需求 物联网边缘计算平台,又名Link IoT Edge[ ...

  2. PHP ftp_nlist() 函数

    「大理石平台维修」大理石平台维修完后需要怎么处理? 定义和用法 ftp_nlist() 函数返回 FTP 服务器上指定目录的文件列表. 如果成功,则返回指定目录下的文件名组成的数组.如果失败,则返回 ...

  3. delphi 文件的操作:重命名、复制、移动、删除

    Delphi 文件的操作:重命名.复制.移动.删除第一种方法: RenameFile('Oldname', 'Newname'); CopyFile(PChar('Oldname'), PChar(' ...

  4. I. Five Day Couple--“今日头条杯”首届湖北省大学程序设计竞赛(网络同步赛)

    题目描述:链接点此 这套题的github地址(里面包含了数据,题解,现场排名):点此 链接:https://www.nowcoder.com/acm/contest/104/H来源:牛客网 题目描述 ...

  5. PAT_A1067#Sort with Swap(0, i)

    Source: PAT A1067 Sort with Swap(0, i) (25 分) Description: Given any permutation of the numbers {0, ...

  6. 剑指offer——03二维数组中的查找

    题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1].不 ...

  7. divide方法

    java.math.BigDecimal.divide(BigDecimal divisor, RoundingMode roundingMode) 返回一个BigDecimal,其值为(this/除 ...

  8. Guava环境设置

    Guava本地环境设置 这部分指导如何下载和设置Java在机器上.请按照以下步骤来设置环境. Java SE免费提供链接:下载Java.所以,根据操作系统下载对应版本. 按照说明下载java和运行.e ...

  9. DQL 数据查询语言 show

    2.show show databases; 查看所有的库 show tables; 查看当前库的所有的表 show tables from database; 查看指定的库下的所有表 show pr ...

  10. Laravel/php 一些调试技巧

    1. 模型属性不知道哪里修改? 直接覆盖模型的 setAttribute 方法,监测到某一个属性改动的时候,抛一个异常就可以看到堆栈了 use Illuminate\Database\Eloquent ...