ionic ialah perpustakaan UI mudah alih yang ringan dengan ciri-ciri kelajuan pantas, antara muka moden dan penampilan yang cantik. Untuk menyelesaikan masalah beberapa perpustakaan UI lain yang berjalan perlahan pada telefon mudah alih, ia secara langsung melepaskan sokongan untuk versi di bawah IOS6 dan Android4.1 untuk mendapatkan pengalaman pengguna yang lebih baik.

Togol ionik (suis) sintaks

Togol suis adalah serupa dengan teg kotak semak HTML, tetapi ia lebih mudah digunakan pada peranti mudah alih.

Togol ionik (suis) contoh

<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>

Run Instance »

Klik butang "Run Instance" untuk melihat instance dalam talian