ionicCSS05_切换开关和滑块

来源：互联网发布：网络当天赚钱灰色项目编辑：程序博客网时间：2024/04/25 10:23

头部导入ionic.min.css

1.ionic Toggle(切换开关)

切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。切换开关可以使用 toggle-assertive 来指定颜色。

注意：该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。

checked=""选中，默认不选中

<div class="content ">单个开关<label class="toggle toggle-assertive">       <input type="checkbox" checked="">       <div class="track">         <div class="handle"></div>       </div></label>多个开关<ul class="list"><li class="item item-toggle">     我心依旧1     <label class="toggle toggle-assertive">       <input type="checkbox" checked="">       <div class="track">         <div class="handle"></div>       </div>     </label></li><li class="item item-toggle">    我心依旧2     <label class="toggle toggle-balanced">       <input type="checkbox">       <div class="track">         <div class="handle"></div>       </div>     </label></li></ul></div>

2.滑块控件

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

<div class="content"><div class="list">          <div class="item item-divider">            滑块列表          </div>    <div class="range">          <i class="icon ion-volume-low"></i>          <input type="range" name="volume" min="0" max="100" value="2">          <i class="icon ion-volume-high"></i>        </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></div>

0 0