PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 视频教程 ionic 教程 查看内容

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

2015-4-12 13:48| 发布者: admin| 查看: 2415| 评论: 0

摘要: 开关通常用来设置两种状态 - 开启和关闭:正如上图中所见,开关的可视部件包括两部分:滑轨(.track)和手柄(.handle)。 ionic使用如下HTML模板创建开关组件:any class="toggle" input type="checkbox" any class ...

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

toggle

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

  1. <any class="toggle">
  2. <input type="checkbox">
  3. <any class="track">
  4. <any class="handle"></any>
  5. </any>
  6. </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>


头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

相关阅读

最新评论

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-5-3 08:47 , Processed in 0.024401 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部