码迷,mamicode.com
首页 > Web开发 > 详细

ionic-CSS:ionic Range

时间:2018-05-07 19:44:01      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:outline   volume   样式   默认   VID   targe   pos   lan   code   

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

标签:outline   volume   样式   默认   VID   targe   pos   lan   code   

原文地址:https://www.cnblogs.com/storebook/p/9004032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!