ionic中开关 .toggle input[type="checkbox"]

作者:本站编辑发布时间:2015-11-24 来源:本站原创点击数:121

开关通常用来设置两种状态 - 开启和关闭：

toggle

正如上图中所见，开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：

<any class="toggle">    <input type="checkbox">    <any class="track">        <any class="handle"></any>    </any></any>

开关也有配色方案样式：.toggle-{color}，用来改变滑轨的背景色。

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
 <link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
 <div class="bar bar-header bar-stable">
  <button class="button button-clear button-positive icon ion-ios-arrow-left">设置</button>
  <h1 class="title">信息</h1>
 </div>
 <div class="scroll-content has-header">
  <ul class="list">
   <li class="item item-toggle">
    iMessage
    <label class="toggle toggle-balanced">
     <input type="checkbox">
     <div class="track">
      <div class="handle"></div>
     </div>
    </label>
   </li>
   <li class="item item-divider">短信/彩信</li>
   <li class="item item-toggle">
    字符计数
    <label class="toggle toggle-balanced">
     <input type="checkbox" checked>
     <div class="track">
      <div class="handle"></div>
     </div>
    </label>
   </li>
   <li class="item item-toggle item-button-right">
    黑名单
    <a class="button button-clear icon ion-ios-arrow-right"></a>
   </li>
  </ul>
 </div>
</body>
</html>

本文责任编辑：加入会员收藏夹点此参与评论>>