ionic Toggle


  Translation results：

ionic is a lightweight mobile UI library with the characteristics of fast speed, modern interface and beautiful appearance. In order to solve the problem of some other UI libraries running slowly on mobile phones, it directly gave up support for versions below IOS6 and Android4.1 to obtain a better user experience.

ionic Togglesyntax

Toggle switches are similar to HTML's checkbox tag, but are easier to use on mobile devices.

ionic Toggleexample

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>PHP中文网(php.cn)</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <body>
    
    <div class="bar bar-header">
      <div class="h1 title">切换</div>
    </div>

    <div class="content has-header">

      <ul class="list">
        <li class="item item-toggle">
           HTML5
           <label class="toggle toggle-positive">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           CSS3
           <label class="toggle toggle-calm">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Flashplayer
           <label class="toggle toggle-balanced">
             <input type="checkbox">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Java Applets
           <label class="toggle toggle-energized">
             <input type="checkbox">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           JavaScript
           <label class="toggle toggle-assertive">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Silverlight
           <label class="toggle toggle-royal">
             <input type="checkbox">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
        <li class="item item-toggle">
           Web Components
           <label class="toggle toggle-dark">
             <input type="checkbox" checked="">
             <div class="track">
               <div class="handle"></div>
             </div>
           </label>
        </li>
      </ul>

    </div>
  </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Popular Recommendations

Home

Videos

Q&A

submit