首页
会员中心
到顶部
到尾部
ionic教程

ionic range

时间:2020/11/3 9:59:33  作者:  来源:  查看:0  评论:0
内容摘要:ionic Rangeionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。实例<div class="range"> <i class="icon ion-volu...

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>

运行效果如下:



上一篇:ionic 单选框
下一篇:ionic select
相关评论
广告联系QQ:45157718 点击这里给我发消息 电话:13516821613 杭州余杭东港路118号雷恩国际科技创新园  网站技术支持:黄菊华互联网工作室 浙ICP备06056032号