ionic-CSS:ionic Range
ylbtech-ionic-CSS:ionic Range |
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.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
ionic-CSS:ionic Range的更多相关文章
- Ionic Css样式详解
Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...
- Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...
- 稍复杂的ionic例子:显示一个列表,并且允许点击进入列表项
这个例子,按照MVC的方式进行了分层,下面是代码: demo3.htm <!DOCTYPE html> <html ng-app="app"> <he ...
- Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构
目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...
- ionic-CSS:ionic icon(图标)
ylbtech-ionic-CSS:ionic icon(图标) 1.返回顶部 1. ionic icon(图标) ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 ...
- ionic:ionic 教程
ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framew ...
- 杂项:ionic
ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS ...
- 国内常用的三种框架:ionic/mui/framework7对比
国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040
- ionic实战系列(一):ionic的开发环境配置和编译、发布
我的ionic实战系列是基于<<Ionic实战>>[美]Jeremy Wilken著-这本书的读书笔记,有诸多借鉴,不详细的地方请参考书籍本身的内容. 1.1技术栈模型 Ion ...
随机推荐
- Kubernetes重大漏洞?阿里云已第一时间全面修复
近日,Kubernetes社区发现安全漏洞 CVE-2018-1002105,阿里云容器服务已在第一时间完成全面修复,敬请广大用户登录阿里云控制台升级Kubernetes版本. 目前Kubernete ...
- PHP FILTER_UNSAFE_RAW 过滤器
定义和用法 FILTER_UNSAFE_RAW 过滤器不进行任何过滤,去除或编码特殊字符. 该过滤器删除那些对应用程序有潜在危害的数据.它用于去除标签以及删除或编码不需要的字符. 如果不规定标志,则该 ...
- CSP-S考前各种idea题解乱堆
快要考试了我还是这么菜. 已经没有心思维护我的博客了.开一篇博文吧.可能会记得很乱. 这也许是我OI生涯的最后一篇博文了?? 肯定很长很长. 不可能的.谁知道什么时候我心态恢复就把上面两句话删掉开始在 ...
- webpack 添加eslint代码审查
1). 添加包 npm install eslint --save-dev npm install eslint-loader --save-dev npm install eslint-plugin ...
- CentOS 7 挂载ntfs分区!
装好centos7发现可以看到分区,可是打不开,还是得用ntfs-3g 官网下好 http://www.tuxera.com/community/ntfs-3g-download/ 然后解压tar - ...
- vbs 之 解决打开Excel文件格式与扩展名指定格式不一致的问题
' Q:解决打开Excel文件格式与扩展名指定格式不一致的问题' A: 使用工作簿saveAs时,往往忽略掉它的第二个参数FileFormat,添加即可. 比如: set bookDiff = oEx ...
- html01. <!DOCTYPE html>
解释 在HTML文档初,往往会有这么一句话<!DOCTYPE html>,它是html5标准网页声明,全称为Document Type HyperText Mark-up Language ...
- PE代码段中的数据
PE代码段中可能包含一些数据,比如 optional header中的data directory会索引到一些数据,比如import/export table等等: 还有一些jump table/sw ...
- centos7简单安装配置mariadb
CentOS 7下yum安装MariaDB yum install mariadb mariadb-server systemctl start mariadb #启动mariadb systemct ...
- Apriori-关联规则挖掘算法
Apriori算法采用的是自底向上的方法,从1-频繁集开始,逐步找出高阶频繁集. 它的基本流程是:第一次扫描交易数据库D时,产生1- 频繁集.在此基础上经过连接.修剪产生2-频繁集.以此类推,直到无法 ...