頭部導入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>